SASS is a preprocessor scripting language that makes CSS more powerful, efficient, and reusable. It allows for variables, nested rules, mixins, inheritance, and other features to help avoid repetitive CSS and make stylesheets more maintainable. SASS files use either the indented SASS or SCSS syntax and compile to normal CSS. SASS is commonly used in Rails projects but can be used in any web project to improve the CSS authoring process.

1. SASS For The Win!An introduction to SASSOct. 13, 20111Created for Magma Rails 2011 - www.magmarails.comSlides posted at http://tinyurl.com/magma-haml-sassSample code from this presentation can be found in the following sample app:https://github.com/jonathandean/SASS-and-HAML-FTW

2. What is SASS?Syntactically Awesome StylesheetsSmarter CSSGives you variables and methods (mixins) for CSSLets you nest declarationsProvides selector inheritanceLets you do math with your variable valuesWorks by compiling .sass or .scss files into normal valid .cssCommonly used in Ruby on Rails applications but can be used in any web projectOct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com2

3. SASS and SCSSTwo available syntaxesSASSSCSSHAML-style indentationNo brackets or semi-colons, based on indentationLess characters to typeEnforced conventions/neatnessSemi-colon and bracket syntaxSuperset of normal CSSNormal CSS is also valid SCSSNewer and recommendedOct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com3

4. SASS and SCSSTwo available syntaxesSASSSCSS$txt-size: 12px$txt-color: #333$link-color: #999#mainfont-size: $txt-sizecolor: $txt-colora color: $link-color$txt-size: 12px;$txt-color: #333;$link-color: #999;#main{ font-size: $txt-size; color: $txt-color;a{ color: $link-color; }}Oct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com4

5. SASS and SCSSBoth syntaxes have the same functionalityBoth of the previous examples compile to:Oct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com5#main{ font-size: 12px; color: #333333;}#main a{ color: #999999;}Already demonstrated basic variable usage and nesting

6. Note: Some examples compile using different formatting, I changed them for the slides for readabilityMore on nestingYou can reference the parent selector with &Oct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com6Resulting CSSSCSS#content{font-size: 12px;&, a{ color: #333;} }#content{ font-size: 12px;}#content, #content a{ color: #333;}

7. Selector inheritanceYou can also extend other CSS declarations with @extend.error{color: red;}.seriousError{@extend .error;font-weight: bold;}Resulting CSS.error, .seriousError{color: red;}.seriousError{font-weight: bold;}Oct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com7

8. MixinsMixins are sets of reusable styles, almost like methods in other languages@mixin awesome-text{font-size: 24px;font-weight: bold;color: blue;}p{@include awesome-text;}Resulting CSSp{font-size: 24px;font-weight: bold;color: blue;}Oct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com8

9. Mixins with parametersMixins can also take parametersOct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com9SCSS@mixin awesome-text($size){font-size: $size;font-weight: bold;color: blue;}p{@include awesome-text(24px);}li{ @include awesome-text(18px);}Resulting CSSp{font-size: 24px;font-weight: bold;color: blue;}li{font-size: 18px;font-weight: bold;color: blue;}

10. More advanced mixin example@mixin image-replace($image-url){&, & a{ display: block; background: url($image-url) no-repeat; } a{ text-indent: -99999px; text-decoration: none; }}h1{@include image-replace(“images/header.gif”);}Resulting CSSh1, h1 a{ display: block;background: url(“images/header.gif”) no-repeat;}h1 a{text-indent: -99999px;text-decoration: none;}Oct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com10

11. Mathematic operationsYou can do simple math operations with your variable values, even if they have unitsOct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com11$page-width: 500px;$sidebar-width: 100px;$content-width: $page-width - $sidebar-width;#main{ width: $page-width;#sidebar{ width: $sidebar-width;}#content{ width: $content-width;}}Resulting CSS#main{ width: 500px;}#main #sidebar{width: 100px;}#main #content{ width: 400px;}

12. Mathematic operationsSupported operations: +, -, *, /, %The division operator (/) is also valid in normal CSSfont: 10px/8px; // stays font: 10px/8px;So it is only used as division in three casesWhen one of the values is stored in a variable$content-width: 500px;width: $content-width/2; // becomes width: 250px;When surrounded by parenthesiswidth: (500px/2); // becomes width: 250px;When part of another math expressionwidth: 10px + 500px/2; // becomes width: 260px;To use variables in the CSS version without doing math operations$some-val: 10px;$another-val: 8px;font: #{$some-val}/#{$another-val}; // font: 10px/8px;Oct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com12

13. InterpolationYou can use variables in selectors and property declarations$class-name: wrapper;$attribute-name: font;div.#{$class-name}{#{$attribute-name}-size: 12px;}Resulting CSSdiv.wrapper{ font-size: 12px;}Oct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com13Warning: RubyMine may not recognize this syntax and highlight it as an error

14. Control directivesOct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com14@if$type: big;p{@if $type == big{font-size: 24px;}}Resulting CSSp{ font-size: 24px;}@if / @else$type: small;p{@if $type == big {font-size: 24px;} @else if $type == medium{ font-size: 18px;} @else { font-size: 16px;}}Resulting CSSp{ font-size: 16px;}

15. Control directivesOct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com15Resulting CSS.item-1{width: 10px; }.item-2{width: 20px; }.item-3{width: 30px; }@for@for $i from 1 through 3 {.item-#{$i} {width: 10px * $i; }}@each @each $item in item1, item2{ .#{$item}{ width: 500px; } }.item1{width: 500px; }.item2{width: 500px; }@while $i: 6; @while $i > 0 { .item-#{$i} { width: 10px * $i; } $i: $i - 2; }.item-6{width: 60px; }.item-4{width: 40px; }.item-2{width: 20px; }

16. Importing other SASS filesImport other .sass or .scss files using @import@import “reset”;@import “reset.css.scss”; // File extension also allowedYou can also create partials that will only be imported to other files and not compiled to .css files themselvesJust name the partial with an underscore in the front, such as _sample.css.scssNow import the same way: @import “sample”;Handy for organizing styles into multiple files but compiling to only one file for use on the webNote: when using the Rails 3.1 asset pipeline, name your files with .css.scss or .css.sassextentions instead of just .scss or .sassOct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com16

17. Nested propertiesSimplify the declaration of name-spaced CSS propertiesOct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com17Resulting CSSSCSS.sassy{font:{ size: 12px; weight: bold;}}.sassy{font-size: 12px; font-weight: bold;}

18. Color operationsYou can also do mathematic operations on color valuescolor: #010203 + #040506; // color: #050709;Howthisiscomputed#010203 + #040506 = #05070901 + 04 = 0502 + 05 = 0703 + 06 = 09Oct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com18

19. Variable defaultsWill only assign the variable if it hasn’t been defined yetOct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com19$page-color: #333;$page-color: #666 !default;$section-color: #999 !default;// won’t be assigned because $page-color has already been defined// will be assigned because $section-color hasn’t been defined yetHandy for when you import a partial in some files but not in all of them and want the value from the partial to take precedence if it has already been defined

20. Using SASS without Railsgem install sasssass --watch path/to/input.scss:path/to/output.cssSass will auto-compile to output.css each time input.css is modifiedUse it for any project you have CSSOct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com20

21. Using SASS in a Rails applicationRails 3.1Included by default!Put your filename.css.scss files in app/assets/stylesheets/The Asset Pipeline will deal with compiling them for youSee the sample application!For older versionsAdd the following to your Gemfilegem “sass”You can put your sass files anywhere, but why not use the new convention introduced by 3.1Use sass --watch in the command line or another gem such as CompassOct. 13, 2011An Introduction to SASS by Jonathan Dean - www.jonathandean.com21