Sass and Compass: An Introduction


Published on

The "missing" introduction to SASS. Cut through the confusion and be ready to start using SASS and Compass after reading my presentation. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. Compass is an open-source CSS Authoring Framework (ie a framework for SASS). SASS has two syntaxes: SASS and SCSS.

Published in: Technology

Sass and Compass: An Introduction

  1. 1. SASS  and  Compass   Presenter:  @anthonyalbertyn   #drupalcambs  
  2. 2. What  is  SASS?   SASS  is  a  system  that  extends  CSS  and  can  make   you  more  efficient  and  make  your  CSS  more   organised.  
  3. 3. SASS  has  two  main  parts   •  SassScript   •  SASS  CSS  pre-­‐processor  
  4. 4. What  is  SassScript?   SassScript  is  a  scripCng  language  that  extends   the  CSS  syntax,  adding  nested  rules,  variables,   mixins,  selector  inheritance  and  more.  
  5. 5. What  does  the  pre-­‐processor  do?   The  pre-­‐processor  interprets  your  SassScript  and   produces  well  formaHed  standard  CSS.  
  6. 6. What  is  Compass?   Compass  is  a  SASS  Framework  consisCng  of  a   collecCon  of  helpful  tools  and  SASS  library  that   produces  baHle-­‐tested  cross-­‐browser  CSS.  
  7. 7. Three  leading  CSS  Pre-­‐processors   •  SASS  and  Compass   hHp://sass-­‐   hHp://compass-­‐   •  LESS   hHp://   •  Stylus  &  Nib   hHp://   hHp:/  
  8. 8. The  process   Write  your  SassScript   @import  Compass  libraries  into  your   SassScript  file  (opConal)         Use  a  CSS  Pre-­‐processor  to  interpret  your   SassScript   CSS  files  are  produced  by  the  pre-­‐processor     (use  these  in  your  website)  
  9. 9. Don’t  get  confused  with  terminology   •  Some  people  say  “SASS”  when  they  mean   “SassScript”  and/or  when  they  refer  to  the   CSS  Pre-­‐processor.   •  Others  use  “Compass”  to  refer  to  “SassScript”   and/or  the  Compass  framework  and/or  the   CSS  Pre-­‐processor.    
  10. 10. Origins  of  SASS  and  Compass   •  Born  in  the  Ruby  on  Rails  community.   •  They  are  both  Ruby  gems.   •  SASS  invented  by  Hampton  Catlin  and     further  developed  by  Nathan  Weizenbaum   and  others.   •  Compass  was  created  by  Chris  Eppstein.  
  11. 11. Let’s  give  them  some  credit   Hampton  Catlin     @hcatlin   He  is  the  inventor  of:  SASS,  Haml,  and  Moovweb  and  the  author   of  "The  PragmaCc  Guide  to  Sass”   ISBN-­‐10:  1934356840  |  ISBN-­‐13:  978-­‐1934356845  
  12. 12. Let’s  give  them  some  credit   Nathan  Weizenbaum   @nex3   www.nex-­‐   He  is  currently  working  for  Google  on  Dart  and  is   the  lead  developer  of  Haml  and  Sass.  
  13. 13. Let’s  give  them  some  credit   Chris  Eppstein     @chriseppstein   hHp://   He  is  the  creator  of  Compass  and  on  the  core   team  for  Sass.  Chris  is  currently  an  engineer  at   LinkedIn.  
  14. 14. Let’s  give  them  some  credit   Nathan  and  Chris  are  authors  of  the  book  "Sass   and  Compass  in  AcCon"     ISBN-­‐10:  1617290149  |  ISBN-­‐13:  978-­‐1617290145     PS.  LinkedIn  has  more  than  1,100  Sass  files  with   230,000+  lines  of  Scss  and  90+  developers  using   Sass.  
  15. 15. SassScript  comes  in  two  syntaxes   •  SCSS  (SassyCSS)   •  SASS  (the  indented  syntax)  
  16. 16. SCSS  syntax   •  Superset  of  CSS  syntax  and  uses  brackets  and   semicolons.  ie  valid  CSS  is  valid  SCSS.   •  SCSS  Stylesheets  get  an  .scss  extension.   •  Most  commonly  used.  
  17. 17. SASS  syntax   •  Instead  of  brackets  and  semicolons,  it  uses   indentaCon  of  lines  to  specify  blocks  of  code.   •  SassScript  stylesheets  get  a  .sass  extension.   •  Older  syntax  of  the  two.   PS.  A  project  would  normally  only  use  one  of  the   two  syntaxes.  
  18. 18. SASS  and  Compass  somware  opCons   •  Download  SASS  and  Compass  and  install  on   your  computer,  then  use  the  command  line  –   requires  Ruby  to  be  installed  (Mac  should   already  have  Ruby).        OR     •  Download  a  SASS/Compass  GUI  and  use  the   graphical  version.  
  19. 19. SASS/Compass  downloads   •  If  you  install  Compass,  it  will  already  come   with  SASS  and  a  CSS  Pre-­‐processor   hHp://compass-­‐   •  If  you  only  want  SASS   hHp://sass-­‐    
  20. 20. SASS/Compass  GUI  opCons   •  (USD  10)  –  does  not  need  Ruby     hHp://   •  Koala  (open  source)  -­‐  used  for  Less,  Sass,   Compass  and  CoffeeScript  –  needs  Ruby   hHp://koala-­‐   •  Scout  (open  source)  –  does  not  need  Ruby   hHp://­‐app  
  21. 21. SASS/Compass  GUI  opCons   •  Codekit  (USD  25)  –  does  not  need  Ruby  but   only  available  for  Mac  OS  10.7+   hHp://  
  22. 22. Other  SASS  pre-­‐processors   •  Scssphp  hHps://   •  sass-­‐java  hHps://­‐java   •  libsass  -­‐  wriHen  in  C++  hHps://   •  node-­‐sass  -­‐  a  node  js  library  to  use  libsass  with   node  js  hHps://­‐sass   •  SassAndCoffee  for  .NET     hHps://  
  23. 23. SASS  and  Compass  Drupal  Modules   •  hHp://   •  hHp://   •  hHp://   PS.  You  don’t  need  any  of  these  if  you  want  to   pre-­‐compile  you  SassScript  with  one  of  the  GUI’s   or  from  the  command  line  or  if  you  are  not  using   Drupal  ;-­‐)    
  24. 24. Using  Scout  GUI   1   • Fire  up  Scout  (press  start  buHon  amer  step  2)   2   • Point  Scout  to  your  SASS/SCSS  directory  and  to  the   directory  where  generated  CSS  files  should  go.   3   • Add  your  SassScript  to  your  .scss  or  sass  file   4   • CSS  file  will  be  generated  when  you  save   your  .sass/.scss  file  
  25. 25. Warning   •  SASS/Compass  will  override  the  CSS  files  (that   it  creates)  every  Cme  you  update  your  sass/ scss  files.   •  Don’t  make  any  direct  edits  to  the  generated   CSS  files.   •  Consider  using  some  form  of  version  control   somware  (like  GIT)  for  the  sass/scss  files  as   well  as  the  generated  css  files.  
  26. 26. Learning  Resources  for     SASS  and  Compass   •  SASS     hHp://sass-­‐   •  Compass   hHp://compass-­‐   PS.  Examples  that  follow  do  not  cover   everything  –  just  a  taster  –  so  please  visit  above   resources  to  learn  more.  
  27. 27. NesCng   #nav  {          li  {                  padding:  5px;                  a  {  color:  #000;  }                  a:hover  {  color:  #fff;  }          }   }  
  28. 28. CSS  output   #nav  li  {padding:  5px;  }   #nav  li  a  {color:  #000;  }   #nav  li  a:hover  {color:  #fff;  }  
  29. 29. NesCng  Parent  References   a  {          color:  #000;          &:hover  {color:  #fff;  }          &:visited  {color:  ff0000;  }   }  
  30. 30. CSS  output   a  {  color:  #000;  }   a:hover  {color:  #fff;  }   a:visited  {color:  #ff0000;  }  
  31. 31. NesCng  properCes   #main  {          border:  {                  style:  doHed;                  top:  {                            color:  #000;                            width:  2px;                  }        }   }  
  32. 32. CSS  output   #main  {            border-­‐style:  doHed;          border-­‐top-­‐color:  #000;          border-­‐top-­‐width:  2px;   }    
  33. 33. Variables   $myred:  #ff0000;   $myother:  #d4d4d4;   h1  {          color:  $myred;   }   h2  {          color:  $myother;   }    
  34. 34. CSS  output   h1  {          color:  red;   }   h2  {          color:  #d4d4d4;   }  
  35. 35. OperaCons  and  FuncCons   •  Math  operators  +  -­‐  *  /  %  are  supported  for   variable  values.     •  There  are  many  funcCons  for  working  with   colours  like:  RGB  funcCons  for  mixing  or   extracCng  colours,  HSL  funcCons  -­‐  for   adjusCng  lightness,  hue,  saturaCon  -­‐  opacity   funcCons  and  more.  
  36. 36. OperaCons   $page:  960px;   $sidebar:  220px;     #main  {          width:  $page  -­‐  $sidebar;   }  
  37. 37. CSS  output   #main  {          width:  740px;   }  
  38. 38. FuncCons  (one  of  many)   $links:  #0000ff;   a  {          color:  $links;          &:hover  {                  lighten($links,  20%);          }   }  
  39. 39. CSS  output   a  {            color:  blue;     }   a:hover  {            color:  #6666ff;   }  
  40. 40. InterpolaCon   •  Use  #{  }  to  insert  variables  into  property   names.   •  Like  this  #{$somevariable}  
  41. 41. InterpolaCon   $rad:  5px;   $ver:  top;   $hor:  lem;     .rounded-­‐#{$ver}-­‐#{$hor}  {          border-­‐#{$ver}-­‐#{$hor}-­‐radius:  $rad;   }    
  42. 42. CSS  output   .rounded-­‐top-­‐lem  {          border-­‐top-­‐lem-­‐radius:  5px;   }  
  43. 43. Mixins   @mixin  box1  {          border:  1px  doHed  #000;          background-­‐color:  #f4f4f4;          padding:  15px;   }   .myblock  {          @include  box1;   }  
  44. 44. CSS  output   .myblock  {          border:  1px  doHed  #000;          background-­‐color:  #f4f4f4;          padding:  15px;   }  
  45. 45. Mixin  Arguments   @mixin  round($radius)  {          border-­‐radius:  $radius;          -­‐webkit-­‐border-­‐radius:  $radius;          -­‐moz-­‐border-­‐radius:  $radius;          -­‐ms-­‐border-­‐radius:  $radius;          -­‐o-­‐border-­‐radius:  $radius;   }     buHon  {  @include  round(5px);  }    
  46. 46. CSS  output   buHon  {            border-­‐radius:  5px;          -­‐webkit-­‐border-­‐radius:  5px;          -­‐moz-­‐border-­‐radius:  5px;          -­‐ms-­‐border-­‐radius:  5px;          -­‐o-­‐border-­‐radius:  5px;   }  
  47. 47. Mixin  arguments   You  can  also  set  default  values  for  mixin   arguments.     @mixin  round($radius:  5px)  {  …  }     buHon1  {  @include  round();  }   buHon2  {@include  round(10px);}  
  48. 48. Mixin  arguments   You  may  also  use  mulCple  arguments  in  a  mixin     @mixin  round($radius:  5px,  $colour)  {  …  }     buHon  {            @include  round(10px,  #ff0000);     }  
  49. 49. Compass  Core  Framework   •  CSS3  –  cross  browser  CSS  mixins.   •  Typography  –  mixins  for  typography  paHerns.   •  UCliCes  –  mixins  for  common  styling  paHerns.   •  Can  import  the  framework  by  using:  @import   “compass”  in  your  sass/scss  stylesheet.  
  50. 50. Example  using  a  Compass  library   Visit  hHp://compass-­‐   Find  the  Compass  mixin  that  you  want  to  use  in     your  script   Add  an  import  statement  to  your  sass/scss  file,   example:  @import  "compass/css3/border-­‐radius"   Then  use  the  mixin  in  your  sass/scss  script,  example:   bu>on  {  @include  border-­‐radius(5px);  }  
  51. 51. #DrupalCambs   •  Cambridge  (UK)  Drupal  Community   •  We  have  monthly  meetups   •  Join  us  on  hHp:// drupalcambs   •  Free  to  join  and  free  to  come  to  meetups   •  The  best  way  to  learn  is  Drupal  is  to  do,  and  to   ask  quesCons  –  we  are  a  friendly  group  J