SASS

89c7dd7559f9155af5114377436f9454?s=47 Jonas Jonny
February 24, 2014

 SASS

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

89c7dd7559f9155af5114377436f9454?s=128

Jonas Jonny

February 24, 2014
Tweet

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