SASS For The Win!<br />An introduction to SASS<br />Oct. 13, 2011<br />1<br />Created for Magma Rails 2011 - www.magmarail...
What is SASS?<br />Syntactically Awesome Stylesheets<br />Smarter CSS<br />Gives you variables and methods (mixins) for CS...
SASS and SCSS<br />Two available syntaxes<br />SASS<br />SCSS<br />HAML-style indentation<br />No brackets or semi-colons,...
SASS and SCSS<br />Two available syntaxes<br />SASS<br />SCSS<br />$txt-size: 12px<br />$txt-color: #333<br />$link-color:...
SASS and SCSS<br />Both syntaxes have the same functionality<br />Both of the previous examples compile to:<br />Oct. 13, ...
Note: Some examples compile using different formatting, I changed them for the slides for readability</li></li></ul><li>Mo...
Selector inheritance<br />You can also extend other CSS declarations with @extend<br />.error{<br />color: red;<br />}<br ...
Mixins<br />Mixins are sets of reusable styles, almost like methods in other languages<br />@mixin awesome-text{<br />font...
Mixins with parameters<br />Mixins can also take parameters<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan De...
More advanced mixin example<br />@mixin image-replace($image-url){<br />&, & a{<br />		display: block;<br />		background: ...
Mathematic operations<br />You can do simple math operations with your variable values, even if they have units<br />Oct. ...
Mathematic operations<br />Supported operations: +, -, *, /, %<br />The division operator (/) is also valid in normal CSS<...
Interpolation<br />You can use variables in selectors and property declarations<br />$class-name: wrapper;<br />$attribute...
Control directives<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />14<br />@i...
Control directives<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />15<br />Re...
Importing other SASS files<br />Import other .sass or .scss files using @import<br />@import “reset”;<br />@import “reset....
Nested properties<br />Simplify the declaration of name-spaced CSS properties<br />Oct. 13, 2011<br />An Introduction to S...
Color operations<br />You can also do mathematic operations on color values<br />color: #010203 + #040506; // color: #0507...
Variable defaults<br />Will only assign the variable if it hasn’t been defined yet<br />Oct. 13, 2011<br />An Introduction...
Using SASS without Rails<br />gem install sass<br />sass --watch path/to/input.scss:path/to/output.css<br />Sass will auto...
Using SASS in a Rails application<br />Rails 3.1<br />Included by default!<br />Put your filename.css.scss files in app/as...
Upcoming SlideShare
Loading in...5
×

Introduction to SASS

9,591

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,591
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
76
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Introduction to SASS

  1. 1. SASS For The Win!<br />An introduction to SASS<br />Oct. 13, 2011<br />1<br />Created for Magma Rails 2011 - www.magmarails.com<br />Slides posted at http://tinyurl.com/magma-haml-sass<br />Sample code from this presentation can be found in the following sample app:<br />https://github.com/jonathandean/SASS-and-HAML-FTW<br />
  2. 2. What is SASS?<br />Syntactically Awesome Stylesheets<br />Smarter CSS<br />Gives you variables and methods (mixins) for CSS<br />Lets you nest declarations<br />Provides selector inheritance<br />Lets you do math with your variable values<br />Works by compiling .sass or .scss files into normal valid .css<br />Commonly used in Ruby on Rails applications but can be used in any web project<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />2<br />
  3. 3. SASS and SCSS<br />Two available syntaxes<br />SASS<br />SCSS<br />HAML-style indentation<br />No brackets or semi-colons, based on indentation<br />Less characters to type<br />Enforced conventions/neatness<br />Semi-colon and bracket syntax<br />Superset of normal CSS<br />Normal CSS is also valid SCSS<br />Newer and recommended<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />3<br />
  4. 4. SASS and SCSS<br />Two available syntaxes<br />SASS<br />SCSS<br />$txt-size: 12px<br />$txt-color: #333<br />$link-color: #999<br />#main<br />font-size: $txt-size<br />color: $txt-color<br />a<br /> color: $link-color<br />$txt-size: 12px;<br />$txt-color: #333;<br />$link-color: #999;<br />#main{<br /> font-size: $txt-size;<br /> color: $txt-color;<br />a{<br /> color: $link-color;<br /> }<br />}<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />4<br />
  5. 5. SASS and SCSS<br />Both syntaxes have the same functionality<br />Both of the previous examples compile to:<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />5<br />#main{<br /> font-size: 12px;<br /> color: #333333;<br />}<br />#main a{<br /> color: #999999;<br />}<br /><ul><li>Already demonstrated basic variable usage and nesting
  6. 6. Note: Some examples compile using different formatting, I changed them for the slides for readability</li></li></ul><li>More on nesting<br />You can reference the parent selector with &<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />6<br />Resulting CSS<br />SCSS<br />#content{<br />font-size: 12px;<br />&, a{<br /> color: #333;<br />} <br />}<br />#content{<br /> font-size: 12px;<br />}<br />#content, #content a{<br /> color: #333;<br />}<br />
  7. 7. Selector inheritance<br />You can also extend other CSS declarations with @extend<br />.error{<br />color: red;<br />}<br />.seriousError{<br />@extend .error;<br />font-weight: bold;<br />}<br />Resulting CSS<br />.error, .seriousError{<br />color: red;<br />}<br />.seriousError{<br />font-weight: bold;<br />}<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />7<br />
  8. 8. Mixins<br />Mixins are sets of reusable styles, almost like methods in other languages<br />@mixin awesome-text{<br />font-size: 24px;<br />font-weight: bold;<br />color: blue;<br />}<br />p{<br />@include awesome-text;<br />}<br />Resulting CSS<br />p{<br />font-size: 24px;<br />font-weight: bold;<br />color: blue;<br />}<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />8<br />
  9. 9. Mixins with parameters<br />Mixins can also take parameters<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />9<br />SCSS<br />@mixin awesome-text($size){<br />font-size: $size;<br />font-weight: bold;<br />color: blue;<br />}<br />p{<br />@include awesome-text(24px);<br />}<br />li{<br /> @include awesome-text(18px);<br />}<br />Resulting CSS<br />p{<br />font-size: 24px;<br />font-weight: bold;<br />color: blue;<br />}<br />li{<br />font-size: 18px;<br />font-weight: bold;<br />color: blue;<br />}<br />
  10. 10. More advanced mixin example<br />@mixin image-replace($image-url){<br />&, & a{<br /> display: block;<br /> background: url($image-url) no-repeat;<br /> }<br /> a{<br /> text-indent: -99999px;<br /> text-decoration: none;<br /> }<br />}<br />h1{<br />@include image-replace(“images/header.gif”);<br />}<br />Resulting CSS<br />h1, h1 a{<br /> display: block;<br />background: url(“images/header.gif”) no-repeat;<br />}<br />h1 a{<br />text-indent: -99999px;<br />text-decoration: none;<br />}<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />10<br />
  11. 11. Mathematic operations<br />You can do simple math operations with your variable values, even if they have units<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />11<br />$page-width: 500px;<br />$sidebar-width: 100px;<br />$content-width: $page-width - $sidebar-width;<br />#main{<br /> width: $page-width;<br />#sidebar{<br /> width: $sidebar-width;<br />}<br />#content{<br /> width: $content-width;<br />}<br />}<br />Resulting CSS<br />#main{<br /> width: 500px;<br />}<br />#main #sidebar{<br />width: 100px;<br />}<br />#main #content{<br /> width: 400px;<br />}<br />
  12. 12. Mathematic operations<br />Supported operations: +, -, *, /, %<br />The division operator (/) is also valid in normal CSS<br />font: 10px/8px; // stays font: 10px/8px;<br />So it is only used as division in three cases<br />When one of the values is stored in a variable<br />$content-width: 500px;<br />width: $content-width/2; // becomes width: 250px;<br />When surrounded by parenthesis<br />width: (500px/2); // becomes width: 250px;<br />When part of another math expression<br />width: 10px + 500px/2; // becomes width: 260px;<br />To use variables in the CSS version without doing math operations<br />$some-val: 10px;<br />$another-val: 8px;<br />font: #{$some-val}/#{$another-val}; // font: 10px/8px;<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />12<br />
  13. 13. Interpolation<br />You can use variables in selectors and property declarations<br />$class-name: wrapper;<br />$attribute-name: font;<br />div.#{$class-name}{<br />#{$attribute-name}-size: 12px;<br />}<br />Resulting CSS<br />div.wrapper{<br /> font-size: 12px;<br />}<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />13<br />Warning: RubyMine may not recognize this syntax and highlight it as an error<br />
  14. 14. Control directives<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />14<br />@if<br />$type: big;<br />p{<br />@if $type == big{<br />font-size: 24px;<br />}<br />}<br />Resulting CSS<br />p{<br /> font-size: 24px;<br />}<br />@if / @else<br />$type: small;<br />p{<br />@if $type == big {<br />font-size: 24px;<br />} @else if $type == medium{<br /> font-size: 18px;<br />} @else {<br /> font-size: 16px;<br />}<br />}<br />Resulting CSS<br />p{<br /> font-size: 16px;<br />}<br />
  15. 15. Control directives<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />15<br />Resulting CSS<br />.item-1{<br />width: 10px; }<br />.item-2{<br />width: 20px; }<br />.item-3{<br />width: 30px; }<br />@for<br />@for $i from 1 through 3 {<br />.item-#{$i} {<br />width: 10px * $i; <br />}<br />}<br />@each<br /> @each $item in item1, item2{<br /> .#{$item}{<br /> width: 500px;<br /> }<br /> }<br />.item1{<br />width: 500px; }<br />.item2{<br />width: 500px; }<br />@while<br /> $i: 6;<br /> @while $i > 0 {<br /> .item-#{$i} {<br /> width: 10px * $i;<br /> }<br /> $i: $i - 2;<br /> }<br />.item-6{<br />width: 60px; }<br />.item-4{<br />width: 40px; }<br />.item-2{<br />width: 20px; }<br />
  16. 16. Importing other SASS files<br />Import other .sass or .scss files using @import<br />@import “reset”;<br />@import “reset.css.scss”; // File extension also allowed<br />You can also create partials that will only be imported to other files and not compiled to .css files themselves<br />Just name the partial with an underscore in the front, such as _sample.css.scss<br />Now import the same way: @import “sample”;<br />Handy for organizing styles into multiple files but compiling to only one file for use on the web<br />Note: when using the Rails 3.1 asset pipeline, name your files with .css.scss or .css.sassextentions instead of just .scss or .sass<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />16<br />
  17. 17. Nested properties<br />Simplify the declaration of name-spaced CSS properties<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />17<br />Resulting CSS<br />SCSS<br />.sassy{<br />font:{<br /> size: 12px;<br /> weight: bold;<br />}<br />}<br />.sassy{<br />font-size: 12px;<br /> font-weight: bold;<br />}<br />
  18. 18. Color operations<br />You can also do mathematic operations on color values<br />color: #010203 + #040506; // color: #050709;<br />Howthisiscomputed<br />#010203 + #040506 = #050709<br />01 + 04 = 05<br />02 + 05 = 07<br />03 + 06 = 09<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />18<br />
  19. 19. Variable defaults<br />Will only assign the variable if it hasn’t been defined yet<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />19<br />$page-color: #333;<br />$page-color: #666 !default;<br />$section-color: #999 !default;<br />// won’t be assigned because $page-color has already been defined<br />// will be assigned because $section-color hasn’t been defined yet<br />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<br />
  20. 20. Using SASS without Rails<br />gem install sass<br />sass --watch path/to/input.scss:path/to/output.css<br />Sass will auto-compile to output.css each time input.css is modified<br />Use it for any project you have CSS<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />20<br />
  21. 21. Using SASS in a Rails application<br />Rails 3.1<br />Included by default!<br />Put your filename.css.scss files in app/assets/stylesheets/<br />The Asset Pipeline will deal with compiling them for you<br />See the sample application!<br />For older versions<br />Add the following to your Gemfile<br />gem “sass”<br />You can put your sass files anywhere, but why not use the new convention introduced by 3.1<br />Use sass --watch in the command line or another gem such as Compass<br />Oct. 13, 2011<br />An Introduction to SASS by Jonathan Dean - www.jonathandean.com<br />21<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×