Knowing how to leverage Sass is ultimately what exposes its advantages over writing CSS unaided. This session is about common and useful Sass utilities. It focuses on getting the most from Sass through Compass as well as Sass properties and functions. We'll also cover core Compass imports, file organization best practices, and tips for approaching designs with Sass thinking. Full session description: http://www.drupaldelphia.com/sessions/finding-better-way-css-navigating-sass-compass

1. Finding a Better Way to CSS
Navigating Sass with Compass

2. I’m...
Claudina Sarahe
@itsmisscs
itsmisscs.com

3. Goals

4. So besides trying to learn a cool…not sure what to
actually call Compass or Sass…technology? You
have to dive into using the command line...actually
USING these things is great. Getting there sucks.
The install process is a bitch...I know that this
sounds discouraging, but I am here to tell you that
ALL that crap…is worth it. Just be prepared for
some serious learning and a lot of searching.
http://jc-designs.net/blog/2010/10/a-review-of-compass-for-sass/

5. Sass: Syntactically
Awesome Style Sheets
CSS Extensions or CSS Preprocessors
Adds Dynamic Behavior:
$Variables
@Mixins (Arguments)
Operations

6. Sass and SCSS
Sass is indent based
#header
background: red
SCSS follows CSS structure
#header {
background: red;
}

7. FRAMEWORK:
An essential supporting structure
A basic structure underlying a system, concept, or text

8. Up and Running
Compass is ruby gem.
Installs Sass
Use with ANY Drupal theme
There is a Drupal module...

9. sudo gem update --system
sudo gem install compass
compass version
compass create path/to/project
cd path/to/project
compass watch

10. File Structure &
config.rb

11. _partials.scss
Always prefixed with underscore
Not compiled into CSS
Great way to break out files
_vars.scss
_mixins.scss
_drupal.scss
Put in own folder (best/common practice)

12. @import “_partials”;
SCREEN.SCSS
Load partials into files that get compiled to CSS
Any file that doesn’t start with underscore gets
compiled
Cascade order preserved

13. Core Imports
@import “compass/typography/text/replacement”;
@import “compass/css”;
@import “compass/typography/links/link-colors”;
@import “compass/typography/lists”;
@import “compass/utilities/sprites”;

14. Image Logo
Social Media Links
Link states
Button (submit inputs)
Sites colors: Red, Orange, Brown, White

15. Set up $variables in
_vars.scss
$main: rgb(90,72,42); // main type brown
$white: rgb(255,255,255);
$red: rgb(177, 32, 36); // Header
$dbrown: rgb(62,45,12); // Darker Brown
$green: rgb(113,124,51); // green
$orange: rgb(239,151,33); // orange
$hover: rgb(249,170,26); // Menu state

16. #header {
background: $red url('../i/bg-header.png') no-repeat right top;
height: 129px;
@include border($white;)
}
#navigation {
$height: 30px;
background: $dbrown;
margin-bottom: 22px;
height: $height; SASS SUPPORTS NESTING BLOCKS
color: $white;
REDUCES CODE CLUTTER
.block {
@include fl;
}
}

17. Mixins => Recipes
Provide chunks of reusable code
Extended with arguments
Compass provides collections of mixins
@import “compass”;

18. @INCLUDE BORDER($WHITE);
@mixin border($color, $all: false, $side: bottom, $width: 1px, $style: solid){
@if $all {
border-width: $width;
border-style: $style;
ARGUMENTS
border-color: $color;
} @else {
border-#{$side}: $width $style $color;
}
INTERPOLATION SYNTAX

19. <h1 class="site-name">
<a href="/" class="active">Social Justice Leadership</a>
</h1>

20. @import “compass/
Core Imports:
typography/text/
http://compass-style.org/reference/compass/
typography/text/replacement/
Replace text with Images
Mixin for hiding text (with accessbility)

21. .site-name {
margin: 10px 10px 0 10px;
a{
@include replace-text-with-dimensions("../i/sjl-logo.png");
display: block;
/* line 63, ../sass/screen.scss */
} .site-name a {
} text-indent: -119988px;
overflow: hidden;
text-align: left;
background-image: url('../i/../i/sjl-logo.png?
1310669861');
background-repeat: no-repeat;
background-position: 50% 50%;
width: 319px;
height: 108px;
display: block;
.site-name {
margin: 10px 10px 0 10px;
}

22. <div id="navigation"><div class="limiter clearfix">
<div class="region region-nav">
<div class="block block-system block-menu clearfix" id="block-system-main-menu"
<div class="block-content clearfix">
<ul class="menu">
<li class="first leaf"><a class=”active” href="/jobs-in-social-justice-organizing"
title="Programs">Programs</a></li>
<li class="leaf"><a href="/upcoming-events" title="Current, Upcoming and Past Events">Calendar</a></li>
<li class="leaf"><a href="/resources" title="Resources">Resources</a></li>
<li class="last leaf"><a href="/media-clips" title="Media">Gallery</a></li>
</ul>
</div>
</div>

23. @include horizontal-list-item;
http://compass-style.org/reference/compass/
typography/lists/horizontal_list/
@import “compass/typography/
links/link-colors”;
http://compass-style.org/reference/compass/
typography/links/link_colors/
Set the color for link: Normal, Hover, Active Visited,
Focus

24. #navigation .menu {
.menu {
margin: 0; @include horizontal-list(false);
padding: 0; a{
border: 0;
overflow: hidden;
@include link-colors($white, $hover);
*zoom: 1; @include border($white, right);
} font-weight: bold;
#navigation .menu li {
text-transform: uppercase;
list-style-image: none; display: block;
list-style-type: none; padding: 5px 10px;
margin-left: 0px; &.active {
white-space: nowrap;
display: inline; background: $hover;
float: left; }
} }
#navigation .menu a {
color: white; /* line 24, ../../../../../../../../../../../../Library/Ruby/Gems/1.8/gems/
border: 1px solid white; compass-0.11.3/frameworks/compass/stylesheets/compass/typography/
font-weight: bold; links/_link-colors.scss */
text-transform: uppercase; #navigation .menu a:hover {
display: block; color: #f9aa1a;
padding: 5px 10px; }
}
#navigation .menu a.active {
background: #f9aa1a;
}

26. Core Imports
@import “compass/css3”;
http://compass-style.org/reference/compass/css3/
Cross browser mixins for CSS properties
Configure which browsers you support
http://compass-style.org/reference/compass/
support/

27. @mixin button($bg, $color: $white, $f-w: normal, $t-trans: uppercase,
$pad: 2px 3px) {
@include border-radius;
background: $bg;
color: $color; input[type="submit"] {
font-weight: $f-w; -moz-border-radius: 5px;
text-transform: $t-trans; -webkit-border-radius: 5px;
padding: $pad; -o-border-radius: 5px;
border: none; -ms-border-radius: 5px;
cursor: pointer; -khtml-border-radius: 5px;
} border-radius: 5px;
background: #717c33;
color: white;
font-weight: normal;
input[type="submit"] { text-transform: uppercase;
@include button($green); padding: 2px 3px;
} border: none;
cursor: pointer;
}

28. .block-search { Operations
@include fl(right);
@include border($white, left);
height: $height; Equality operations (==, =!)
input[type="text"] { Arithmetic on numbers (+, -, *, /, %)
width: 127px; Relational operators (<, >, <=, >=)
height: $height - 4px;
margin: 1px;
}
}

29. <div class="block block-boxes block-boxes-simple clearfix" id="block-boxes-social-media">
<h2 class="block-title clearfix">Follow</h2>
<div class="block-content clearfix">
<div id="boxes-box-social_media" class="boxes-box">
<div class="boxes-box-content">
<ul>
<li class="icon-fb"><a href="" title="SJL on Facebook">Facebook</a></li>
<li class="icon-twitter"><a href="" title="Follow SJL">Twitter</a></li>
<li class="icon-rss"><a href="rss.xml" title="Keep up with SJL feed">RSS</a></li>
</ul>
</div>
</div>
</div>
</div>

30. @import “compass/
Core Imports:
utilities/sprites”;
http://compass-style.org/reference/compass/helpers/
sprites/

31. /* SPRITES ------------------------------------------------------------*/
@IMPORT "ICON/*.PNG";
@INCLUDE ALL-ICON-SPRITES;
.icon-sprite, .icon-fb, .icon-rss, .icon-twitter {
background: url('../i/icon-s430e9af5f6.png')
no-repeat;
}
.icon-fb {
background-position: 0 0;
}
.icon-rss {
background-position: 0 -19px;
}
.icon-twitter {
background-position: 0 -38px;
}

32. http://compass-style.org
http://adamstacoviak.com/posts/referencing-parent-selectors/
https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
http://palantetech.com
http://hazanco.com
Resources & Credits
Thanks!