1. SASS For The Win! An introduction to SASS Oct. 13, 2011 1 Created for Magma Rails 2011 - www.magmarails.com Slides posted at http://tinyurl.com/magma-haml-sass Sample 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 Stylesheets Smarter CSS Gives you variables and methods (mixins) for CSS Lets you nest declarations Provides selector inheritance Lets you do math with your variable values Works by compiling .sass or .scss files into normal valid .css Commonly used in Ruby on Rails applications but can be used in any web project Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com 2

3. SASS and SCSS Two available syntaxes SASS SCSS HAML-style indentation No brackets or semi-colons, based on indentation Less characters to type Enforced conventions/neatness Semi-colon and bracket syntax Superset of normal CSS Normal CSS is also valid SCSS Newer and recommended Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com 3

4. SASS and SCSS Two available syntaxes SASS SCSS $txt-size: 12px $txt-color: #333 $link-color: #999 #main font-size: $txt-size color: $txt-color a 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, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com 4

7. Selector inheritance You 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, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com 7

8. Mixins Mixins 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 CSS p{ font-size: 24px; font-weight: bold; color: blue; } Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com 8

9. Mixins with parameters Mixins can also take parameters Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com 9 SCSS @mixin awesome-text($size){ font-size: $size; font-weight: bold; color: blue; } p{ @include awesome-text(24px); } li{ @include awesome-text(18px); } Resulting CSS p{ 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 CSS h1, h1 a{ display: block; background: url(“images/header.gif”) no-repeat; } h1 a{ text-indent: -99999px; text-decoration: none; } Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com 10

11. Mathematic operations You can do simple math operations with your variable values, even if they have units Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com 11 $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 operations Supported operations: +, -, *, /, % The division operator (/) is also valid in normal CSS font: 10px/8px; // stays font: 10px/8px; So it is only used as division in three cases When one of the values is stored in a variable $content-width: 500px; width: $content-width/2; // becomes width: 250px; When surrounded by parenthesis width: (500px/2); // becomes width: 250px; When part of another math expression width: 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, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com 12

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

14. Control directives Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com 14 @if $type: big; p{ @if $type == big{ font-size: 24px; } } Resulting CSS p{ 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 CSS p{ font-size: 16px; }

15. Control directives Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com 15 Resulting 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 files Import other .sass or .scss files using @import @import “reset”; @import “reset.css.scss”; // File extension also allowed You can also create partials that will only be imported to other files and not compiled to .css files themselves Just name the partial with an underscore in the front, such as _sample.css.scss Now import the same way: @import “sample”; Handy for organizing styles into multiple files but compiling to only one file for use on the web Note: when using the Rails 3.1 asset pipeline, name your files with .css.scss or .css.sassextentions instead of just .scss or .sass Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com 16

17. Nested properties Simplify the declaration of name-spaced CSS properties Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com 17 Resulting CSS SCSS .sassy{ font:{ size: 12px; weight: bold; } } .sassy{ font-size: 12px; font-weight: bold; }

18. Color operations You can also do mathematic operations on color values color: #010203 + #040506; // color: #050709; Howthisiscomputed #010203 + #040506 = #050709 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09 Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com 18

19. Variable defaults Will only assign the variable if it hasn’t been defined yet Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com 19 $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 yet Handy 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 Rails gem install sass sass --watch path/to/input.scss:path/to/output.css Sass will auto-compile to output.css each time input.css is modified Use it for any project you have CSS Oct. 13, 2011 An Introduction to SASS by Jonathan Dean - www.jonathandean.com 20

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