SASS

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