Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Welcome to Sass (& Compass)

Welcome to Sass (& Compass)

A little introductory talk I gave at my local WordPress meetup. Folks asked terrific questions, and I even had a few answers. A good time was had by all, and hopefully a few new converts were made.

Matthew Wimmer

March 21, 2013
Tweet

Other Decks in Technology

Transcript

  1. Sass extends CSS by adding useful tools to make your

    stylesheets more logical, more readable, more easily maintained, and more reusable.
  2. ๏Partials for be er structure ๏Amazing nested rules ๏Variables FTW

    ๏Selector inheritance ๏Magical mixins The Agenda
  3. $ gem install sass $ mv style.css style.scss $ sass

    --watch style.scss:style.css $ or --not Command Line
  4. ๏Original Sass syntax (.sass) ๏Conciseness over CSS similarity ๏Indentation to

    specify blocks ๏Sassy CSS syntax (.scss) ๏Superset of CSS3 ๏Newer syntax Two Syntaxes
  5. header    margin-­‐bottom:  1.5em    background-­‐color:  gray    font-­‐family:  sans-­‐serif

       border-­‐top:  1px  dotted  purple Original Sass Syntax .sass le extension
  6. header  {    margin-­‐bottom:  1.5em;    background-­‐color:  gray;    font-­‐family:

     sans-­‐serif;    border-­‐top:  1px  dotted  purple; } Sassy CSS Syntax .scss le extension
  7. ๏Sass combines into single le ๏Fewer HTTP requests ๏Compressed output

    ๏Promotes logical organization ๏Reduces size of working les Why Partials?
  8. SCSS Source /*  Styles  for  My  Rad  Project  *  Version:

     1.0  *  Author:  Me  */ @import  "normalize"; @import  "base"; @import  "type"; @import  "layout"; @import  "print"; style.css
  9. SCSS Source header  {    margin-­‐bottom:  1.5em;    h1  {

           font-­‐family:  sans-­‐serif;    } } header  {    background-­‐color:  gray;    h1,  h2,  h3  {        font-­‐family:  sans-­‐serif;    } } Selectors & Lists
  10. Compiled CSS header  {    margin-­‐bottom:  1.5em; } header  h1

     {    font-­‐family:  sans-­‐serif; } header  {    background-­‐color:  gray; } header  h1,  header  h2,  header  h3  {    font-­‐family:  sans-­‐serif; } Selectors & Lists
  11. SCSS Source header  {    h1  {      

     a  {            color:  blue;            &:hover  {                text-­‐decoration:  underline;            }        }        .search-­‐results  &  {                font-­‐weight:  bold;        }    } } Parent Selectors
  12. Compiled CSS header  h1  a  {    color:  blue; }

    header  h1  a:hover  {    text-­‐decoration:  underline; } .search-­‐results  header  h1  {    font-­‐weight:  bold; } Parent Selectors
  13. SCSS Source header  {    width:  100%;    margin:  0;

       @media  screen  and  (min-­‐width:30em)  {        width:  20em;        margin:  0  auto;    } } @media In Context
  14. Compiled CSS header  {    width:  100%;    margin:  0;

    } @media  screen  and  (min-­‐width:  30em)  {    header  {        width:  20em;        margin:  0  auto;    } } @media In Context
  15. SCSS Source header  {    border-­‐top:  1px  dotted  purple;  

     h1  {        font:  {            family:  sans-­‐serif;            size:  2.2em;            weight:  bold;          }    } } Nested Properties
  16. Compiled CSS header  {    border-­‐top:  1px  dotted  purple; }

    header  h1  {    font-­‐family:  sans-­‐serif;    font-­‐size:  2.2em;    font-­‐weight:  bold; } Nested Properties
  17. SCSS Source header  {    >  hgroup  {  padding:  1em;

     }    ~  h1  {  font-­‐size:  2.2em;  }    +  h2  {  color:  green;  }    *  nav  {  text-­‐transform:  uppercase;  } } Symbol Selectors
  18. Compiled CSS header  >  hgroup  {      padding:  1em;

    } header  ~  h1  {    font-­‐size:  2.2em; } header  +  h2  {    color:  green; } header  *  nav  {    text-­‐transform:  uppercase; } Symbol Selectors
  19. ๏Keeps you DRY ๏Groups styles logically ๏Be er visualize the

    cascade ๏Can lead to over-speci city, so ๏Don’t get carried away Nesting Notes
  20. SCSS Source $link:  purple; $visited:  blue; $hover:  orange; $active:  green;

    a  {    color:  $link;    &:visited  {  color:  $visited;  }    &:hover  {  color:  $hover;  }    &:active  {  color:  $active;  } } Basic Variables
  21. Compiled CSS a  {    color:  purple; } a:visited  {

       color:  blue; } a:hover  {    color:  orange; } a:active  {    color:  green; } Basic Variables
  22. SCSS Source $margin:  2em; $gray:  #282828; $pattern:  "checkers.png"; .feature-­‐box  {

       padding:  $margin  /  2;    margin:  $margin  /  2;    border:  1px  dotted  $gray;    background:  url($pattern)  repeat  left  top; } Slide Title
  23. Compiled CSS .feature-­‐box  {    padding:  1em;    margin:  1em;

       border:  1px  dotted  #282828;    background:  url("checkers.png")  repeat  left  top; } Slide Title
  24. ๏ Extra DRY ๏More maintainable code ๏Colors, numbers, or text

    strings ๏Recognizes units (em, px, etc.) ๏$variable: value; $awesome:
  25. SCSS Source .footnotes  {    font-­‐size:  0.7em;    color:  #c0c0c0;

    } .endnotes  {    @extend  .footnotes;    border:  1px  solid  #333;    background-­‐color:  #f0f0f0; } Basic Usage
  26. Compiled CSS .footnotes,  .endnotes  {    font-­‐size:  0.7em;    color:

     #c0c0c0; } .endnotes  {    border:  1px  solid  #333333;    background-­‐color:  #f0f0f0; } Basic Usage
  27. SCSS Source .tacos  {    background-­‐color:  #fc6; } .burritos  {

       font-­‐weight:  bold; } .combination-­‐platter  {    @extend  .tacos;    @extend  .burritos;    border-­‐radius:  5em  !important; } Multiple Extends
  28. Compiled CSS .tacos,  .combination-­‐platter  {    background-­‐color:  #fc6; } .burritos,

     .combination-­‐platter  {    font-­‐weight:  bold; } .combination-­‐platter  {    border-­‐radius:  5em  !important; } Multiple Extends
  29. SCSS Source .alert  {    padding:  2em;    border:  1px

     solid  blue; } .important  {    @extend  .alert;    background-­‐color:  #f99;    border-­‐color:  red; } .critical  {    @extend  .important;    border-­‐width:  3px; } Chaining Extends
  30. Compiled CSS .alert,  .important,  .critical  {    padding:  2em;  

     border:  1px  solid  blue; } .important,  .critical  {    background-­‐color:  #f99;    border-­‐color:  red; } .critical  {    border-­‐width:  3px; } Chaining Extends
  31. SCSS Source %shhh  {    font-­‐size:  0.5em;    color:  #ccc;

    } .be-­‐vewy-­‐quiet  {    @extend  %shhh; } .hunting-­‐wabbits  {    @extend  %shhh;    width:  100%; } “Silent” Extends
  32. Compiled CSS .be-­‐vewy-­‐quiet,  .hunting-­‐wabbits  {    font-­‐size:  0.5em;    color:

     #ccc; } .hunting-­‐wabbits  {    width:  100%; } Slide Title
  33. ๏Share styles between selectors ๏Avoid excessive classes in HTML ๏Extend

    explicitly or “silently” ๏Multiple extends and chaining ๏DRY much? Reduce, Reuse…
  34. SCSS Source @mixin  hide-­‐text()  {    overflow:hidden;    text-­‐indent:-­‐9000px;  

     display:block; } .logo{    background:  url("logo.png");    height:100px;    width:200px;    @include  hide-­‐text; } Plain Vanilla Mixin
  35. Compiled CSS .logo  {    background:  url("logo.png");    height:  100px;

       width:  200px;    overflow:  hidden;    text-­‐indent:  -­‐9000px;    display:  block; } Plain Vanilla Mixin
  36. SCSS Source @mixin  product-­‐highlight($bg,  $border,  $color)  {    width:  10em;

       background-­‐color:  $bg;    border-­‐top:  2px  solid  $border;    h3  {  color:  $color;  } } .waxes-­‐floors  {    @include  product-­‐highlight(#cff,  #9cc,  #63c); } .shines-­‐shoes  {    @include  product-­‐highlight(#ffc,  #fc9,  #f93); } With Arguments
  37. Compiled CSS .waxes-­‐floors  {    width:  10em;    background-­‐color:  #ccffff;

       border-­‐top:  2px  solid  #99cccc; } .waxes-­‐floors  h3  {  color:  #6633cc;  } .shines-­‐shoes  {    width:  10em;    background-­‐color:  #ffffcc;    border-­‐top:  2px  solid  #ffcc99; } .shines-­‐shoes  h3  {  color:  #ff9933;  } With Arguments
  38. SCSS Source @mixin  alert($bg:  #ccc,  $border:  #888,  $line:  1px)  {

       border:  $line  solid  $border;    background-­‐color:  $bg; } .notice  {    @include  alert(); } .success  {    @include  alert(#9f9,  #393); } .error  {    @include  alert(#ffc,  #c33,  2px); } With Default Values
  39. Compiled CSS .notice  {    border:  1px  solid  #888888;  

     background-­‐color:  #cccccc; } .success  {    border:  1px  solid  #339933;    background-­‐color:  #99ff99; } .error  {    border:  2px  solid  #cc3333;    background-­‐color:  #ffffcc; } With Default Values
  40. ๏Like @extend but be er ๏Work like CSS functions ๏Reuse

    whole style blocks ๏Use arguments to customize ๏Keeps your code, say it with me… Stir and Serve
  41. ๏Control directives ๏@if, @for, @each, @while ๏Built in functions ๏Color

    operations ๏Math operations ๏Boolean operations And More…
  42. ๏Framework built on Sass ๏Blueprint CSS built in ๏Reusable pa

    erns ๏Vendor pre x free CSS3 ๏Crazy easy spriting ๏Vertical rhythm Compass Style
  43. con g.rb le at project root http_path  =  "/" css_dir

     =  "stylesheets" sass_dir  =  "sass" images_dir  =  "images" javascripts_dir  =  "javascripts" fonts_dir  =  "fonts" output_style  =  :nested environment  =  :development Configuration File
  44. CSS3 ๏ Appearance ๏ Background Clip ๏ Background Origin ๏

    Background Size ๏ Border Radius ๏ Box ๏ Box Shadow ๏ Box Sizing ๏ CSS Regions ๏ CSS3 Pie ๏ Columns ๏ Filter ๏ Font Face ๏ Hyphenation ๏ Images ๏ Inline Block ๏ Opacity ๏ Shared Utilities ๏ Text Shadow ๏ Transform ๏ Transition ๏ User Interface
  45. SCSS Source @import  "compass/css3"; .mega-­‐box  {    width:  400px;  

     height:  300px;    @include  border-­‐radius(0.1em);    @include  box-­‐shadow(5px  5px  5px   rgba(255,255,255,0.5));    @include  rotate(10deg); } CSS3 Made Easy!
  46. Compiled CSS .mega-­‐box  {    width:  400px;    height:  300px;

       -­‐webkit-­‐border-­‐radius:  0.1em;    -­‐moz-­‐border-­‐radius:  0.1em;    -­‐ms-­‐border-­‐radius:  0.1em;    -­‐o-­‐border-­‐radius:  0.1em;    border-­‐radius:  0.1em;    -­‐webkit-­‐box-­‐shadow:  5px  5px  5px  rgba(255,  255,  255,  0.5);    -­‐moz-­‐box-­‐shadow:  5px  5px  5px  rgba(255,  255,  255,  0.5);    box-­‐shadow:  5px  5px  5px  rgba(255,  255,  255,  0.5);    -­‐webkit-­‐transform:  rotate(10deg);    -­‐moz-­‐transform:  rotate(10deg);    -­‐ms-­‐transform:  rotate(10deg);    -­‐o-­‐transform:  rotate(10deg);    transform:  rotate(10deg); } CSS3 Made Easy!
  47. Helpers ๏ Color Stops ๏ Colors ๏ Constants ๏ Cross

    Browser ๏ Display Helpers ๏ Font Files ๏ Image Dimensions ๏ Inline Data ๏ Math ๏ Selectors ๏ Sprites ๏ URLs
  48. Code Caption /*! Theme  Name:          Twenty

     Twelve  Child Theme  URI:            http://example.com/ Description:        Child  theme  for  the  Twenty  Twelve   theme   Author:                  Major  #bada55 Author  URI:          http://example.com/about/ Template:              twentytwelve Version:                0.1.0 */ @import  "../twentytwelve/style.css"; @import  "my-­‐sassy-­‐stuff"; Why yes, they do
  49. con g.rb le at project root http_path  =  "/" css_dir

     =  "stylesheets" sass_dir  =  "sass" images_dir  =  "images" javascripts_dir  =  "javascripts" fonts_dir  =  "fonts" output_style  =  :nested environment  =  :development Configuration File
  50. h p://css-tricks.com/compass-compiling-and-wordpress-themes/ require  'fileutils' on_stylesheet_saved  do  |file|    if  File.exists?(file)

     &&  File.basename(file)  ==   "style.css"        puts  "Moving:  #{file}"        FileUtils.mv(file,  File.dirname(file)  +  "/../"  +   File.basename(file))    end end Compass & WordPress