SASS

My presentation about CSS preprocessor SASS for Frontendisti.cz.
Basic introduction, why I chose SASS and what I love.

Transcript

1. SASS Syntactically Awesome Style Sheets SASS Syntactically Awesome Style Sheets (Sassy CSS = .scss)
2. SASS Syntactically Awesome Style Sheets 2006 First commit
3. SASS Syntactically Awesome Style Sheets GitHub We've found 1,045 (sass) / 704 (less) / 111 (stylus) repository results
4. SASS Syntactically Awesome Style Sheets People Harry Roberts (Iunit.css) Chris Coyier (css-tricks, codepen) Nicole Sullivan (OOCSS)
5. SASS Syntactically Awesome Style Sheets .min
6. SASS Syntactically Awesome Style Sheets Syntax
7. @import @import "compass/css3"; @import "susy"; @import "var"; #main { @include border-radius(5px); // compass @include span-columns(10); // compass-susy background: $background-color; // _var.scss }
8. @import /style.scss /modules/ _normalize.scss /ie.scss Will compile to: style.css ie.css
9. $variables $myColor: #f8f8f8; $number: 768px !default; $string: "Hello World"; $bool: true; $null: null; $list: listItem1 listItem2 listItem3; type-of($myColor) // color
10. @mixin // Sass mixin @mixin border-radius ($radius: 10px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } /* SCSS */ #main { @include border-radius(5px); }
11. @if @for @each @while .box { @if $var == one { } @else if $var == two { } } @for $i from 0 to 5 { .something-#{$i + 1} { font-size: .7em + ($i * .5em); } }
12. @function @function px2em($fontSize, $base_fontSize: 16) { @return $fontSize / $base_fontSize + em } .header { font-size: px2em(32px); } .header { font-size: 2em; }
13. @media .header { width: 80%; @media only screen and (min-width: 50em) { Width: 90%; } } .header { width: 80%; } @media only screen and (min-device-width: 50em) { .header { width: 90%; }
14. %placeholder Classes that won't appear in the output of CSS fle. %absoluteWide { position: absolute; left: 0; right: 0; } .box { @extend %absoluteWide; }
15. SASS Syntactically Awesome Style Sheets Bourbon A simple and lightweight mixin library for Sass. + Neat
16. Bourbon // Bourbon mixin with Sass .gradient { @include linear-gradient(to top, red, blue); } /* Compiled CSS */ .gradient { background-color: red; background-image: -webkit-linear-gradient(bottom, red, blue); background-image: linear-gradient(to top red, blue); }
17. SASS Syntactically Awesome Style Sheets Compass CSS3 mixins, Typography, CSS sprites + Susy
18. SASS Syntactically Awesome Style Sheets Nesting No thank you! But source maps?
19. SASS Syntactically Awesome Style Sheets @JonasKrutil
20. Bye & $list: s, k, n, a, h, t; $new-list: reverse($list); // t, h, a, n, k, s