SASS	
  and	
  Compass	
  
Presenter:	
  @anthonyalbertyn	
  
#drupalcambs	
  
What	
  is	
  SASS?	
  
SASS	
  is	
  a	
  system	
  that	
  extends	
  CSS	
  and	
  can	
  make	
  
you	
  more	
  efficie...
SASS	
  has	
  two	
  main	
  parts	
  
•  SassScript	
  
•  SASS	
  CSS	
  pre-­‐processor	
  
What	
  is	
  SassScript?	
  
SassScript	
  is	
  a	
  scripCng	
  language	
  that	
  extends	
  
the	
  CSS	
  syntax,	
...
What	
  does	
  the	
  pre-­‐processor	
  do?	
  
The	
  pre-­‐processor	
  interprets	
  your	
  SassScript	
  and	
  
pr...
What	
  is	
  Compass?	
  
Compass	
  is	
  a	
  SASS	
  Framework	
  consisCng	
  of	
  a	
  
collecCon	
  of	
  helpful	...
Three	
  leading	
  CSS	
  Pre-­‐processors	
  
•  SASS	
  and	
  Compass	
  
hHp://sass-­‐lang.com	
  
hHp://compass-­‐st...
The	
  process	
  
Write	
  your	
  SassScript	
  
@import	
  Compass	
  libraries	
  into	
  your	
  
SassScript	
  file	
...
Don’t	
  get	
  confused	
  with	
  terminology	
  
•  Some	
  people	
  say	
  “SASS”	
  when	
  they	
  mean	
  
“SassSc...
Origins	
  of	
  SASS	
  and	
  Compass	
  
•  Born	
  in	
  the	
  Ruby	
  on	
  Rails	
  community.	
  
•  They	
  are	
...
Let’s	
  give	
  them	
  some	
  credit	
  
Hampton	
  Catlin	
  	
  
@hcatlin	
  	
  
www.hamptoncatlin.com	
  
He	
  is	...
Let’s	
  give	
  them	
  some	
  credit	
  
Nathan	
  Weizenbaum	
  
@nex3	
  
www.nex-­‐3.com	
  
He	
  is	
  currently	
...
Let’s	
  give	
  them	
  some	
  credit	
  
Chris	
  Eppstein	
  	
  
@chriseppstein	
  
hHp://chriseppstein.github.com	
 ...
Let’s	
  give	
  them	
  some	
  credit	
  
Nathan	
  and	
  Chris	
  are	
  authors	
  of	
  the	
  book	
  "Sass	
  
and...
SassScript	
  comes	
  in	
  two	
  syntaxes	
  
•  SCSS	
  (SassyCSS)	
  
•  SASS	
  (the	
  indented	
  syntax)	
  
SCSS	
  syntax	
  
•  Superset	
  of	
  CSS	
  syntax	
  and	
  uses	
  brackets	
  and	
  
semicolons.	
  ie	
  valid	
  ...
SASS	
  syntax	
  
•  Instead	
  of	
  brackets	
  and	
  semicolons,	
  it	
  uses	
  
indentaCon	
  of	
  lines	
  to	
 ...
SASS	
  and	
  Compass	
  somware	
  opCons	
  
•  Download	
  SASS	
  and	
  Compass	
  and	
  install	
  on	
  
your	
  ...
SASS/Compass	
  downloads	
  
•  If	
  you	
  install	
  Compass,	
  it	
  will	
  already	
  come	
  
with	
  SASS	
  and...
SASS/Compass	
  GUI	
  opCons	
  
•  Compass.app	
  (USD	
  10)	
  –	
  does	
  not	
  need	
  Ruby	
  	
  
hHp://compass....
SASS/Compass	
  GUI	
  opCons	
  
•  Codekit	
  (USD	
  25)	
  –	
  does	
  not	
  need	
  Ruby	
  but	
  
only	
  availab...
Other	
  SASS	
  pre-­‐processors	
  
•  Scssphp	
  hHps://github.com/leafo/scssphp	
  
•  sass-­‐java	
  hHps://github.co...
SASS	
  and	
  Compass	
  Drupal	
  Modules	
  
•  hHp://drupal.org/project/sass	
  
•  hHp://drupal.org/project/compass	
...
Using	
  Scout	
  GUI	
  
1	
  
• Fire	
  up	
  Scout	
  (press	
  start	
  buHon	
  amer	
  step	
  2)	
  
2	
  
• Point	...
Warning	
  
•  SASS/Compass	
  will	
  override	
  the	
  CSS	
  files	
  (that	
  
it	
  creates)	
  every	
  Cme	
  you	
...
Learning	
  Resources	
  for	
  	
  
SASS	
  and	
  Compass	
  
•  SASS	
  	
  
hHp://sass-­‐lang.com	
  
•  Compass	
  
h...
NesCng	
  
#nav	
  {	
  
	
  	
  	
  	
  li	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  padding:	
  5px;	
  
	
  	
  	
  	
  ...
CSS	
  output	
  
#nav	
  li	
  {padding:	
  5px;	
  }	
  
#nav	
  li	
  a	
  {color:	
  #000;	
  }	
  
#nav	
  li	
  a:ho...
NesCng	
  Parent	
  References	
  
a	
  {	
  
	
  	
  	
  	
  color:	
  #000;	
  
	
  	
  	
  	
  &:hover	
  {color:	
  #ff...
CSS	
  output	
  
a	
  {	
  color:	
  #000;	
  }	
  
a:hover	
  {color:	
  #fff;	
  }	
  
a:visited	
  {color:	
  #ff0000;	
...
NesCng	
  properCes	
  
#main	
  {	
  
	
  	
  	
  	
  border:	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  style:	
  doHed;	
...
CSS	
  output	
  
#main	
  {	
  	
  
	
  	
  	
  	
  border-­‐style:	
  doHed;	
  
	
  	
  	
  	
  border-­‐top-­‐color:	
...
Variables	
  
$myred:	
  #ff0000;	
  
$myother:	
  #d4d4d4;	
  
h1	
  {	
  
	
  	
  	
  	
  color:	
  $myred;	
  
}	
  
h2	...
CSS	
  output	
  
h1	
  {	
  
	
  	
  	
  	
  color:	
  red;	
  
}	
  
h2	
  {	
  
	
  	
  	
  	
  color:	
  #d4d4d4;	
  
...
OperaCons	
  and	
  FuncCons	
  
•  Math	
  operators	
  +	
  -­‐	
  *	
  /	
  %	
  are	
  supported	
  for	
  
variable	
...
OperaCons	
  
$page:	
  960px;	
  
$sidebar:	
  220px;	
  
	
  
#main	
  {	
  
	
  	
  	
  	
  width:	
  $page	
  -­‐	
  $...
CSS	
  output	
  
#main	
  {	
  
	
  	
  	
  	
  width:	
  740px;	
  
}	
  
FuncCons	
  (one	
  of	
  many)	
  
$links:	
  #0000ff;	
  
a	
  {	
  
	
  	
  	
  	
  color:	
  $links;	
  
	
  	
  	
  	
...
CSS	
  output	
  
a	
  {	
  	
  
	
  	
  	
  	
  color:	
  blue;	
  	
  
}	
  
a:hover	
  {	
  	
  
	
  	
  	
  	
  color:...
InterpolaCon	
  
•  Use	
  #{	
  }	
  to	
  insert	
  variables	
  into	
  property	
  
names.	
  
•  Like	
  this	
  #{$s...
InterpolaCon	
  
$rad:	
  5px;	
  
$ver:	
  top;	
  
$hor:	
  lem;	
  
	
  
.rounded-­‐#{$ver}-­‐#{$hor}	
  {	
  
	
  	
  ...
CSS	
  output	
  
.rounded-­‐top-­‐lem	
  {	
  
	
  	
  	
  	
  border-­‐top-­‐lem-­‐radius:	
  5px;	
  
}	
  
Mixins	
  
@mixin	
  box1	
  {	
  
	
  	
  	
  	
  border:	
  1px	
  doHed	
  #000;	
  
	
  	
  	
  	
  background-­‐color...
CSS	
  output	
  
.myblock	
  {	
  
	
  	
  	
  	
  border:	
  1px	
  doHed	
  #000;	
  
	
  	
  	
  	
  background-­‐colo...
Mixin	
  Arguments	
  
@mixin	
  round($radius)	
  {	
  
	
  	
  	
  	
  border-­‐radius:	
  $radius;	
  
	
  	
  	
  	
  ...
CSS	
  output	
  
buHon	
  {	
  
	
  	
  	
  	
  	
  border-­‐radius:	
  5px;	
  
	
  	
  	
  	
  -­‐webkit-­‐border-­‐rad...
Mixin	
  arguments	
  
You	
  can	
  also	
  set	
  default	
  values	
  for	
  mixin	
  
arguments.	
  
	
  
@mixin	
  ro...
Mixin	
  arguments	
  
You	
  may	
  also	
  use	
  mulCple	
  arguments	
  in	
  a	
  mixin	
  
	
  
@mixin	
  round($rad...
Compass	
  Core	
  Framework	
  
•  CSS3	
  –	
  cross	
  browser	
  CSS	
  mixins.	
  
•  Typography	
  –	
  mixins	
  fo...
Example	
  using	
  a	
  Compass	
  library	
  
Visit	
  hHp://compass-­‐style.org	
  
Find	
  the	
  Compass	
  mixin	
  ...
#DrupalCambs	
  
•  Cambridge	
  (UK)	
  Drupal	
  Community	
  
•  We	
  have	
  monthly	
  meetups	
  
•  Join	
  us	
  ...
Upcoming SlideShare
Loading in...5
×

Sass and Compass: An Introduction

2,664

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
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,664
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
93
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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-­‐lang.com   hHp://compass-­‐style.org   •  LESS   hHp://lesscss.org   •  Stylus  &  Nib   hHp://learnboost.github.io/stylus   hHp:/visionmedia.github.com/nib  
  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     www.hamptoncatlin.com   He  is  the  inventor  of:  SASS,  Haml,   m.wikipedia.org  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-­‐3.com   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://chriseppstein.github.com   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-­‐style.org/install   •  If  you  only  want  SASS   hHp://sass-­‐lang.com/download.html    
  20. 20. SASS/Compass  GUI  opCons   •  Compass.app  (USD  10)  –  does  not  need  Ruby     hHp://compass.handlino.com   •  Koala  (open  source)  -­‐  used  for  Less,  Sass,   Compass  and  CoffeeScript  –  needs  Ruby   hHp://koala-­‐app.com   •  Scout  (open  source)  –  does  not  need  Ruby   hHp://mhs.github.io/scout-­‐app  
  21. 21. SASS/Compass  GUI  opCons   •  Codekit  (USD  25)  –  does  not  need  Ruby  but   only  available  for  Mac  OS  10.7+   hHp://incident57.com/codekit  
  22. 22. Other  SASS  pre-­‐processors   •  Scssphp  hHps://github.com/leafo/scssphp   •  sass-­‐java  hHps://github.com/darrinholst/sass-­‐java   •  libsass  -­‐  wriHen  in  C++  hHps://github.com/hcatlin/libsass   •  node-­‐sass  -­‐  a  node  js  library  to  use  libsass  with   node  js  hHps://npmjs.org/package/node-­‐sass   •  SassAndCoffee  for  .NET     hHps://github.com/xpaulbeHsx/SassAndCoffee  
  23. 23. SASS  and  Compass  Drupal  Modules   •  hHp://drupal.org/project/sass   •  hHp://drupal.org/project/compass   •  hHp://drupal.org/project/sassy   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-­‐lang.com   •  Compass   hHp://compass-­‐style.org   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-­‐style.org   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://www.meetup.com/ 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  
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×