An Introduction toSassy CSSStewart Curry  @IRISHSTU   AN INTRODUCTION TO SASSY CSS   #REFRESHDUBLIN   18 JULY 2012
Who isThis Guy?Web Designer for 15 years or soTable-based layouts & spacer gifsCSS changed all thatSCSS is CSS only better...
past                                           simple@IRISHSTU   AN INTRODUCTION TO SASSY CSS    #REFRESHDUBLIN   18 JULY ...
@IRISHSTU   AN INTRODUCTION TO SASSY CSS   #REFRESHDUBLIN   18 JULY 2012
now                              complicated@IRISHSTU   AN INTRODUCTION TO SASSY CSS   #REFRESHDUBLIN   18 JULY 2012
💬@IRISHSTU   AN INTRODUCTION TO SASSY CSS   #REFRESHDUBLIN   18 JULY 2012
designeverywhere@IRISHSTU   AN INTRODUCTION TO SASSY CSS   #REFRESHDUBLIN   18 JULY 2012
                                                                                            📱                      ...
SASS MAKESCSS FUN AGAINwww.sass-lang.comBasically, CSS made flexible& awesome by adding incool features.  @IRISHSTU   AN IN...
TOPICS•   What’s Sass/SCSS?•   Installing Sass•   Variables•   Nesting•   Mixins•   Media Queries•   Partials•   Inheritan...
There                                             Will                                           be Code@IRISHSTU   AN INT...
TOPICS•   What’s Sass/SCSS?•   Installing Sass•   Variables•   Nesting•   Mixins•   Media Queries•   Partials•   Inheritan...
Sass                     Style with attitude“   Sass is an extension of CSS3, adding    nested rules, variables, mixins,  ...
it looks like CSS  $blue: #3bbfce;  $margin: 16px;.content-navigation {  border-color: $blue;  color: darken($blue, 9%);}....
it looks like CSS but•   it’s neater•   it’s faster to write•   it allows for more experimentation•   it’s more flexible•  ...
so you can•   experiment more•   make global changes quickly•   make reusable modules•   use frameworks more effectively•  ...
workflow📁    css📁    images📁    scripts📄    index.html@IRISHSTU   AN INTRODUCTION TO SASSY CSS   #REFRESHDUBLIN   18 JULY 2...
workflow📁    css📁    images📁    sass📁    scripts📄    index.html@IRISHSTU   AN INTRODUCTION TO SASSY CSS   #REFRESHDUBLIN   ...
workflow📁    css📁    images📁    sass       📄      style.scss     scripts📁📄    index.html@IRISHSTU   AN INTRODUCTION TO SASS...
workflow       📄                             ⚙                📄style.scss                        processor   style.css  @IR...
workflow📁    css       📄      style.css📁    images📁    sass       📄      style.scss📁    scripts📄    index.html@IRISHSTU   A...
all you do is...•   make a .scss file•   write to it, just like normal CSS•   translate it to a CSS file/folder:•   sass --w...
Y U NO                USE LESS.JS?@IRISHSTU   AN INTRODUCTION TO SASSY CSS   #REFRESHDUBLIN   18 JULY 2012
TOPICS•   What’s Sass/SCSS?•   Installing Sass•   Variables•   Nesting•   Mixins•   Media Queries•   Partials•   Inheritan...
@IRISHSTU   AN INTRODUCTION TO SASSY CSS   #REFRESHDUBLIN   18 JULY 2012
@IRISHSTU   AN INTRODUCTION TO SASSY CSS   #REFRESHDUBLIN   18 JULY 2012
Install Ruby rubyinstaller.org$ sudo gem install sass$ sass --watch style.scss:style.css @IRISHSTU   AN INTRODUCTION TO SA...
http://incident57.com/codekit/@IRISHSTU   AN INTRODUCTION TO SASSY CSS                     #REFRESHDUBLIN   18 JULY 2012
TOPICS•   What’s Sass/SCSS?•   Installing Sass•   Variables•   Nesting•   Mixins•   Media Queries•   Partials•   Inheritan...
$variables“   variables allow you to use the    same value in multiple places, as    well as perform basic maths and    fu...
why variables rockChange one variable and you changeit everywhere. Save hours of search &replacing. Experiment with smallc...
$variables•    begin with a dollar sign $•    assign a value with a colon separator :•    end with semi-colon ;    $red   ...
$primarycolor   :   red                                                     $mainfont       :   “Open Sans...             ...
operations•   maths: + - / *•   color: darken, lighten, saturation, opacity•   http://sass-lang.com/docs/yardoc/Sass/    S...
$primarycolor : red                                               $column       : 40px                                    ...
$basetypesize : 1emescaping•    wrap with #{ }•    useful for paths                                                       ...
$margin         : 16pxnegatives•    minus symbols•    -64px -32px 0 16px•    top: -96px; right , left are 0; bottom is 16p...
$margin         : 16pxnegatives•    wrap in brackets•    (-$variable*value)                                               ...
TOPICS•   What’s Sass/SCSS?•   Installing Sass•   Variables•   Nesting•   Mixins•   Media Queries•   Partials•   Inheritan...
nesting“   Sass avoids repetition by    nesting selectors within one    another. The same thing works    with properties. ...
why nesting rocksWrite a hell of a lot less CSS. Avoidrepetion. Use indentation to quicklyscan and see relationships. Usea...
write html as normal                                                                     HTML  <nav>   <ul>      <li><a   ...
$mainfont    : “Open Sans...                                                      $margin      : 16pxnest & indent        ...
$mainfont    : “Open Sans...                                                 $margin      : 16pxnest & indent             ...
selectors                                                                SCSSem    {    font:    {        family: Georgia,...
&@IRISHSTU                              ampersand            AN INTRODUCTION TO SASSY CSS   #REFRESHDUBLIN   18 JULY 2012
$primarycolor : #993333& ampersand•     pulls the parent selector into the &                                              ...
$primarycolor : #993333ampersand &•     prepends before parent selector                                                   ...
ampersand &•    use with HTML body classes                                                                    SCSS    #bro...
ampersand &•    use with HTML body classes                                                                     CSS    #bro...
$size : 16pxampersand &•    use with HTML body classes                                                                    ...
$size : 16pxampersand &•    use with HTML body classes                                                                    ...
TOPICS•   What’s Sass/SCSS?•   Installing Sass•   Variables•   Nesting•   Mixins•   Media Queries•   Partials•   Inheritan...
@mixins“   mixins allow you to re-use whole    chunks of CSS, properties or    selectors. You can even give    them argume...
why mixins rockReduce massive chunks of CSS intoreusable includes that you can useover and over again.  @IRISHSTU   AN INT...
http://compass-style.org/@IRISHSTU   AN INTRODUCTION TO SASSY CSS                    #REFRESHDUBLIN   18 JULY 2012
@mixin•    begin with @mixin•    give it a name•    add your $variable(s)•    give (an) optional default value(s)    @mixi...
@mixin•    call it with @include                                                                    SCSS    .fancybox    {...
image replace@mixin hidetext    {    text-indent: 100%;    white-space: nowrap;    overflow: hidden;}.logo    {    backgro...
boxshadow@mixin boxshadow ($horz, $vert, $blur, $spread, $color)    {    -webkit-box-shadow: #{$horz}px #{$vert}px #{$blur...
transitions@mixin transanim ($time)    {    -webkit-transition: all #{$time}s ease-in-out;    -moz-transition: all #{$time...
$grid       : 20px                                            $lineheight : 1emtype@mixin type ($size, $lineheight, $margi...
$grid       : 20px                                            $lineheight : 1emtype                                       ...
@each                                                                         SCSS$social: twitter facebook linkedin;@mixi...
it’s a loop!                                                                           CSS.social .social-twitter {  backg...
retina                                                                               SCSS@mixin bgretina    ($source, $for...
retina                                                                          CSS#responsivetest {  width: 400px;  heigh...
ampersand &•     make it a mixin to reuse                                                                                 ...
TOPICS•   What’s Sass/SCSS?•   Installing Sass•   Variables•   Nesting•   Mixins•   Media Queries•   Partials•   Inheritan...
@media“   @media directives in Sass    behave just like they do in plain    CSS, with one extra capability:    they can be...
whymedia queries rockMake responsive layouts. Associatemedia queries more closley with theelement you are changeing.  @IRI...
@media•   begin with @media•   write media queries as normal•   if it appears within a rule, it will ‘bubble up’    and pu...
@media                                                                SCSS.sidebar {  float: right;  width: 300px;  @media...
1                                    2               #logo                                  #menu                         ...
2              #menu                             1              #logo                                           #content  ...
@media                                                                SCSS@mixin boxit ($dir) {    display:box;    display...
@media                                                                               SCSS@media screen and (max-width: 480...
2              #menu     1                             1              #logo     2                                         ...
3.2@IRISHSTU                            coming soon            AN INTRODUCTION TO SASSY CSS   #REFRESHDUBLIN   18 JULY 2012
@mediaYou can’t use this yet - watch https://github.com/nex3/sass/•   variables in queries•   Sass 3.2 alpha•   other cool...
@mediaYou can’t use this yet - watch https://github.com/nex3/sass/                                                        ...
TOPICS•   What’s Sass/SCSS?•   Installing Sass•   Variables•   Nesting•   Mixins•   Media Queries•   Partials•   Inheritan...
_partials“   partials are snippets of scss    that are saved into files meant    to be imported. They begin    with an unde...
why partials rockInclude files for CSS. Make your filesmore managable by breaking theminto discreet external modules.  @IRIS...
_partials•   filename starts with an underscore•   e.g. “_grid.scss”•   import it into your .scss file•   @import "grid";•  ...
workflow                   📄                                 ⚙                 📄         style.scss                        ...
@IRISHSTU   AN INTRODUCTION TO SASSY CSS   #REFRESHDUBLIN   18 JULY 2012
@IRISHSTU   AN INTRODUCTION TO SASSY CSS   #REFRESHDUBLIN   18 JULY 2012
examples•   Separate partials for:•   grids, typography, colours, forms, tables•   mixins & variables•   different post typ...
TOPICS•   What’s Sass/SCSS?•   Installing Sass•   Variables•   Nesting•   Mixins•   Media Queries•   Partials•   Inheritan...
@extend“   The @extend directive (tells) Sass    that one selector should inherit    the styles of another selector.    ht...
why extend rocksLets you add styles from one selectorto another, as well as its own styles.  @IRISHSTU   AN INTRODUCTION T...
@extend•   nest @extend .classname;•   goes inside another class•   don’t have to use multiple classes•   association is i...
@extend                                                                SCSS.error {  border: 1px #f00;  background: #fdd;}...
TOPICS•   What’s Sass/SCSS?•   Installing Sass•   Variables•   Nesting•   Mixins•   Media Queries•   Partials•   Inheritan...
gotchas!A few things to watch out for whenworking with SCSS.  @IRISHSTU   AN INTRODUCTION TO SASSY CSS   #REFRESHDUBLIN   ...
@IRISHSTU   AN INTRODUCTION TO SASSY CSS   #REFRESHDUBLIN   18 JULY 2012
/facepalm•   make sure you’re running your compiler•   make sure it’s not CSS•   watch out for escaping #{values}•   be aw...
codekit@IRISHSTU   AN INTRODUCTION TO SASSY CSS   #REFRESHDUBLIN   18 JULY 2012
TOPICS•   What’s Sass/SCSS?•   Installing Sass•   Variables•   Nesting•   Mixins•   Media Queries•   Partials•   Inheritan...
useful links @IRISHSTU   AN INTRODUCTION TO SASSY CSS   #REFRESHDUBLIN   18 JULY 2012
learn more•   http://sass-lang.com/•   http://www.youtube.com/watch?    v=fbVD32w1oTo•   https://twitter.com/teamsassdesig...
learn more•   http://incident57.com/codekit/•   http://compass-style.org/•   http://thesassway.com/projects/sass-    twitt...
thank you!feedback, comments, links?     @irishstu  @IRISHSTU   AN INTRODUCTION TO SASSY CSS   #REFRESHDUBLIN   18 JULY 2012
Upcoming SlideShare
Loading in …5
×

An Introduction to Sassy CSS

2,778 views
2,681 views

Published on

CSS is a fantastic language for making beautiful websites, but sometimes it can be a bit, well, clunky. Sassy CSS (SCSS) makes it fun again by extending CSS and adding great features such as variables, mixins, nesting and much more. In this talk I run through a beginner's guide to SCSS, show you how to get started and explain the basic features with lots of code examples. You'll be able to build faster, experiment more, and spend less time typing and more time creating.

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,778
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
43
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

An Introduction to Sassy CSS

  1. 1. An Introduction toSassy CSSStewart Curry @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  2. 2. Who isThis Guy?Web Designer for 15 years or soTable-based layouts & spacer gifsCSS changed all thatSCSS is CSS only betterwoop.ie - iteration, modules, themes, templates @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  3. 3. past simple@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  4. 4. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  5. 5. now complicated@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  6. 6. 💬@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  7. 7. designeverywhere@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  8. 8.      📱  💻@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  9. 9. SASS MAKESCSS FUN AGAINwww.sass-lang.comBasically, CSS made flexible& awesome by adding incool features. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  10. 10. TOPICS• What’s Sass/SCSS?• Installing Sass• Variables• Nesting• Mixins• Media Queries• Partials• Inheritance• Gotchas• Links @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  11. 11. There Will be Code@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  12. 12. TOPICS• What’s Sass/SCSS?• Installing Sass• Variables• Nesting• Mixins• Media Queries• Partials• Inheritance• Gotchas• Links @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  13. 13. Sass Style with attitude“ Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. www.sass-lang.com @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  14. 14. it looks like CSS $blue: #3bbfce; $margin: 16px;.content-navigation {  border-color: $blue;  color: darken($blue, 9%);}.border {  padding: $margin / 2;  margin: $margin / 2;  border-color: $blue;} @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  15. 15. it looks like CSS but• it’s neater• it’s faster to write• it allows for more experimentation• it’s more flexible• it’s more manageable• it’s got variables! @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  16. 16. so you can• experiment more• make global changes quickly• make reusable modules• use frameworks more effectively• handle RWD neatly• have less cluttered code @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  17. 17. workflow📁 css📁 images📁 scripts📄 index.html@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  18. 18. workflow📁 css📁 images📁 sass📁 scripts📄 index.html@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  19. 19. workflow📁 css📁 images📁 sass 📄 style.scss scripts📁📄 index.html@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  20. 20. workflow 📄 ⚙ 📄style.scss processor style.css @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  21. 21. workflow📁 css 📄 style.css📁 images📁 sass 📄 style.scss📁 scripts📄 index.html@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  22. 22. all you do is...• make a .scss file• write to it, just like normal CSS• translate it to a CSS file/folder:• sass --watch style.scss:style.css• sass --watch stylesheets/ ↵ sass:stylesheets/compiled• and any changes you make to your SCSS file(s) will be complied to your CSS file(s). @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  23. 23. Y U NO USE LESS.JS?@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  24. 24. TOPICS• What’s Sass/SCSS?• Installing Sass• Variables• Nesting• Mixins• Media Queries• Partials• Inheritance• Gotchas• Links @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  25. 25. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  26. 26. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  27. 27. Install Ruby rubyinstaller.org$ sudo gem install sass$ sass --watch style.scss:style.css @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  28. 28. http://incident57.com/codekit/@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  29. 29. TOPICS• What’s Sass/SCSS?• Installing Sass• Variables• Nesting• Mixins• Media Queries• Partials• Inheritance• Gotchas• Links @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  30. 30. $variables“ variables allow you to use the same value in multiple places, as well as perform basic maths and functions. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  31. 31. why variables rockChange one variable and you changeit everywhere. Save hours of search &replacing. Experiment with smallchanges in margins & gutters. Reskinwith different colours... @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  32. 32. $variables• begin with a dollar sign $• assign a value with a colon separator :• end with semi-colon ; $red    :  #ff0000; $font    :  "Open Sans", Arial, Sans-Serif; $margin  :  16px; $column  :  40px; $type  :  1em; @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  33. 33. $primarycolor : red $mainfont : “Open Sans... $basetypesize : 1em$variables $margin : 16px• use instead of a value SCSS h1    {     color: $primarycolor;     font-family: $mainfont;     font-size: $basetypesize;     margin: 0 0 $margin 0; } h1 {   color: red;   font-family: "Open Sans", Arial, Sans-Serif;   font-size: 1em;   margin: 0 0 16px 0; } CSS @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  34. 34. operations• maths: + - / *• color: darken, lighten, saturation, opacity• http://sass-lang.com/docs/yardoc/Sass/ Script/Functions.html @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  35. 35. $primarycolor : red $column : 40px $margin : 16pxoperations SCSS.island    {    background: darken($primarycolor,10%);    width: $column*4;    margin: $margin*2 $margin/2 $margin+20 $margin;    padding: $margin*0.25;}.island {  background: #cc0000;  width: 160px;  margin: 32px 8px 36px 16px;  padding: 4px;} CSS @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  36. 36. $basetypesize : 1emescaping• wrap with #{ }• useful for paths SCSS p {   font: #{$basetypesize}/#{$basetypesize*1.5} $mainfont; } p {   font: 1em/1.5em "Open Sans", Arial, Sans-Serif;   } CSS @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  37. 37. $margin : 16pxnegatives• minus symbols• -64px -32px 0 16px• top: -96px; right , left are 0; bottom is 16px SCSS .moveup    {     margin:-$margin*4 -$margin*2 0 $margin; } .moveup {   margin: -96px 0 16px; } CSS @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  38. 38. $margin : 16pxnegatives• wrap in brackets• (-$variable*value) SCSS .moveup    {     margin:(-$margin*4) (-$margin*2) 0 $margin; } .moveup {   margin: -64px -32px 0 16px; } CSS @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  39. 39. TOPICS• What’s Sass/SCSS?• Installing Sass• Variables• Nesting• Mixins• Media Queries• Partials• Inheritance• Gotchas• Links @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  40. 40. nesting“ Sass avoids repetition by nesting selectors within one another. The same thing works with properties. www.sass-lang.com @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  41. 41. why nesting rocksWrite a hell of a lot less CSS. Avoidrepetion. Use indentation to quicklyscan and see relationships. Useampersands for awesomeness. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  42. 42. write html as normal HTML <nav>   <ul>      <li><a href="#">Home</a></li>      <li><a href="#">About</a></li>      <li><a href="#">Services</a></li>      <li><a href="#">Contact Us</a></li>   </ul></nav> @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  43. 43. $mainfont : “Open Sans... $margin : 16pxnest & indent SCSSnav    {    font-family: $mainfont;    ul    {        margin: 0;        padding: 0;        li {            list-style: none;            a {                background: #222;                color: #fff;                display: block;                float: left;                padding: $margin $margin*1.5;                text-decoration: none;            }            }    }} @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  44. 44. $mainfont : “Open Sans... $margin : 16pxnest & indent CSSnav {  font-family: "Open Sans", Arial, Sans-Serif;}  nav ul {  margin: 0;  padding: 0;}nav ul li {   list-style: none;}nav ul li a {   background: #222;   border-right: 1px solid #666;   color: #fff;   display: block;   float: left;   padding: 16px 24px;   text-decoration: none;} @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  45. 45. selectors SCSSem    {    font:    {        family: Georgia, Serif;        style: normal;        weight: bold;        variant: small-caps;    }}em {  font-family: Georgia, Serif;  font-style: normal;  font-weight: bold;  font-variant: small-caps;} CSS @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  46. 46. &@IRISHSTU ampersand AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  47. 47. $primarycolor : #993333& ampersand• pulls the parent selector into the & SCSS #fancybox {     li a.fancy {         &:link    { color: $primarycolor; }         &:visited { color: darken($primarycolor,20%); }         &:hover   { color: lighten($primarycolor,10%); }     } } #fancybox li a.fancy:link    { color: #993333; } #fancybox li a.fancy:visited { color: #4d1919; } #fancybox li a.fancy:hover   { color: #bf4040; } CSS @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  48. 48. $primarycolor : #993333ampersand &• prepends before parent selector SCSS #fancybox {     li a.fancy {         &:link  { color: $primarycolor; }         &:hover { color: lighten($primarycolor,10%); }                  body#checkout & { border:1px solid $primarycolor; }     } } #fancybox li a.fancy:link           { color: #993333; } #fancybox li a.fancy:hover          { color: #bf4040; } body#checkout #fancybox li a.fancy  { border: 1px solid #993333; } CSS @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  49. 49. ampersand &• use with HTML body classes SCSS #browserwars    {     border: 1px solid red;          .ie8 &, .ie9 & {         border: 1px solid blue;     }     .ie10 & {         border: 1px solid green;     } } @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  50. 50. ampersand &• use with HTML body classes CSS #browserwars {   border: 1px solid red; } .ie8 #browserwars, .ie9 #browserwars {     border: 1px solid blue; } .ie10 #browserwars {     border: 1px solid green; } @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  51. 51. $size : 16pxampersand &• use with HTML body classes SCSS $size :16px; h1    {     font: {         family: Arial, sans-serif;           size: $size;     }     .wf-active &    {         font: {             family: "proxima-nova-extra-condensed", Arial, sans-serif;               size: $size*1.5;         }     } } @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  52. 52. $size : 16pxampersand &• use with HTML body classes CSS h1 {     font-family: Arial, sans-serif;     font-size: 16px; }    .wf-active h1 {     font-family: "proxima-nova-extra-condensed", Arial, sans-serif;     font-size: 24px; } @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  53. 53. TOPICS• What’s Sass/SCSS?• Installing Sass• Variables• Nesting• Mixins• Media Queries• Partials• Inheritance• Gotchas• Links @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  54. 54. @mixins“ mixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them arguments. www.sass-lang.com @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  55. 55. why mixins rockReduce massive chunks of CSS intoreusable includes that you can useover and over again. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  56. 56. http://compass-style.org/@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  57. 57. @mixin• begin with @mixin• give it a name• add your $variable(s)• give (an) optional default value(s) @mixin roundcorner ($radius: 4px)    {     -webkit-border-radius: $radius;     -moz-border-radius: $radius;     border-radius: $radius; } @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  58. 58. @mixin• call it with @include SCSS .fancybox    {     width: 100px;     @include roundcorner(10); } .fancybox {   width: 100px;   -webkit-border-radius: 10px;   -moz-border-radius: 10px;   border-radius: 10px; } CSS @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  59. 59. image replace@mixin hidetext    {    text-indent: 100%;    white-space: nowrap;    overflow: hidden;}.logo    {    background: url(images/logo.png) no-repeat;    @include hidetext; width: 200px; height: 80px;} @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  60. 60. boxshadow@mixin boxshadow ($horz, $vert, $blur, $spread, $color)    {    -webkit-box-shadow: #{$horz}px #{$vert}px #{$blur}px #{$spread}px $color;    -moz-box-shadow: #{$horz} px #{$vert}px #{$blur}px #{$spread}px $color;    box-shadow: #{$horz}px #{$vert}px #{$blur}px #{$spread}px $color;}@include boxshadow (2,2,2,0,rgba(0,0,0,0.5)); @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  61. 61. transitions@mixin transanim ($time)    {    -webkit-transition: all #{$time}s ease-in-out;    -moz-transition: all #{$time} s ease-in-out;    -o-transition: all #{$time}s ease-in-out;    -ms-transition: all #{$time}s ease-in-out;    transition: all all #{$time}s ease-in-out;}* {   @include transanim(0.5);} @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  62. 62. $grid : 20px $lineheight : 1emtype@mixin type ($size, $lineheight, $marginbottom: 1 1.5 1)    {    font-size: $grid*$size;    font-size: $grid*$size / 16px + rem;    line-height: $grid*$lineheight;    line-height: $grid*$lineheight / 16px + rem;    margin:0 0 $grid*$marginbottom 0;}h1    {  @include type  (1.75, 2, 1);} @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  63. 63. $grid : 20px $lineheight : 1emtype CSSh1 {  font-size: 35px;  font-size: 2.188rem;  line-height: 40px;  line-height: 2.5rem;  margin: 0 0 20px 0;  } @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  64. 64. @each SCSS$social: twitter facebook linkedin;@mixin social-icons {   @each $icon in $social {      .social-#{$icon} {         background: url("images/#{$icon}.png") no-repeat;      }   }} .social {  @include social-icons;} @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  65. 65. it’s a loop! CSS.social .social-twitter {  background: url("images/twitter.png") no-repeat;}  .social .social-facebook {  background: url("images/facebook.png") no-repeat;}  .social .social-linkedin {  background: url("images/linkedin.png") no-repeat;} @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  66. 66. retina SCSS@mixin bgretina    ($source, $format )    {    background:    {        image: url("#{$source}.#{$format}");        size: cover;        repeat: no-repeat;    }    @media screen and (-webkit-min-device-pixel-ratio: 2)    {        background:    {            image: url("#{$source}@2x.#{$format}");        }    }}#responsivetest    {    width: 400px;    height: 400px;    @include bgretina(bgimage,png)} @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  67. 67. retina CSS#responsivetest {  width: 400px;  height: 400px;  background-image: url("bgimage.png");  background-size: cover;  background-repeat: no-repeat; }  @media screen and (-webkit-min-device-pixel-ratio: 2) {    #responsivetest {      background-image: url("bgimage@2x.png"); }  } @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  68. 68. ampersand &• make it a mixin to reuse SCSS @mixin webfonts    ($fallback, $shinytype, $size)    {     font: {         family: #{$fallback};         size: $size;     }              .wf-active &    {         font: {             family: "#{$shinytype}", #{$fallback};               size: $size*1.5;         }     } } h1    { @include webfonts("Arial, sans-serif", "proxima-nova-extra-condensed", 16px); } @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  69. 69. TOPICS• What’s Sass/SCSS?• Installing Sass• Variables• Nesting• Mixins• Media Queries• Partials• Inheritance• Gotchas• Links @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  70. 70. @media“ @media directives in Sass behave just like they do in plain CSS, with one extra capability: they can be nested in CSS rules. www.sass-lang.com @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  71. 71. whymedia queries rockMake responsive layouts. Associatemedia queries more closley with theelement you are changeing. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  72. 72. @media• begin with @media• write media queries as normal• if it appears within a rule, it will ‘bubble up’ and put the selectors within the rule.• media queries can be nested• combined with the and rule @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  73. 73. @media SCSS.sidebar {  float: right;  width: 300px;  @media screen and (max-width: 480px) {      float: none;    width: 100%;  }}.sidebar {  float: right;  width: 300px;}@media screen and (max-width: 480px) {    .sidebar {      float: none;      width: 100%;    }} CSS @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  74. 74. 1 2 #logo #menu 4 3 #leftnav #content 5 #footer@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  75. 75. 2 #menu 1 #logo #content 4 3 #leftnav 5 #footer@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  76. 76. @media SCSS@mixin boxit ($dir) {    display:box;    display:-moz-box;    display:-webkit-box;    box-orient:$dir;    -moz-box-orient:$dir;    -webkit-box-orient:$dir;}@mixin boxnum($num: 1) {    box-ordinal-group: #{$num};    -moz-box-ordinal-group: #{$num};    -webkit-box-ordinal-group: #{$num};} @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  77. 77. @media SCSS@media screen and (max-width: 480px) {    #wrapper    {        width: 100%;        @include boxit(vertical);         #logo      { @include boxnum(2); }        #menu      { @include boxnum(1); } #content   { @include boxnum(3); }        #leftnav   { @include boxnum(4); }        #footer    { @include boxnum(5); }    }} @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  78. 78. 2 #menu 1 1 #logo 2 #content 4 3 3 #leftnav 4 5 #footer 5@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  79. 79. 3.2@IRISHSTU coming soon AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  80. 80. @mediaYou can’t use this yet - watch https://github.com/nex3/sass/• variables in queries• Sass 3.2 alpha• other cool stuff @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  81. 81. @mediaYou can’t use this yet - watch https://github.com/nex3/sass/ SCSS @mixin respond-to($media) {   @if $media == handhelds {     @media only screen and (max-width: 320px) { @content; }   }   @else if $media == medium-screens {     @media only screen and (min-width: 321px) and (max-width: 1024px) { @content; }   }   @else if $media == wide-screens {     @media only screen and (min-width: 1024px) { @content; }   } } .profile-pic {   float: left;   width: 250px;   @include respond-to(handhelds) { width: 100% ;}   @include respond-to(medium-screens) { width: 125px; }   @include respond-to(wide-screens) { float: none; } } http://thesassway.com/intermediate/responsive-web-design-part-2#the_future_of_media_queries_in_sass @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  82. 82. TOPICS• What’s Sass/SCSS?• Installing Sass• Variables• Nesting• Mixins• Media Queries• Partials• Inheritance• Gotchas• Links @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  83. 83. _partials“ partials are snippets of scss that are saved into files meant to be imported. They begin with an underscore and don’t get compiled. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  84. 84. why partials rockInclude files for CSS. Make your filesmore managable by breaking theminto discreet external modules. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  85. 85. _partials• filename starts with an underscore• e.g. “_grid.scss”• import it into your .scss file• @import "grid";• save on HTTP requests• better structure @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  86. 86. workflow 📄 ⚙ 📄 style.scss processor style.css 📄 📄 📄_reset.scss _grid.scss _type.scss @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  87. 87. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  88. 88. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  89. 89. examples• Separate partials for:• grids, typography, colours, forms, tables• mixins & variables• different post types for blogs• adverts• media queries• site sub-sections @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  90. 90. TOPICS• What’s Sass/SCSS?• Installing Sass• Variables• Nesting• Mixins• Media Queries• Partials• Inheritance• Gotchas• Links @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  91. 91. @extend“ The @extend directive (tells) Sass that one selector should inherit the styles of another selector. http://nex-3.com/posts/99-selector-inheritance-the-easy-way-introducing-extend @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  92. 92. why extend rocksLets you add styles from one selectorto another, as well as its own styles. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  93. 93. @extend• nest @extend .classname;• goes inside another class• don’t have to use multiple classes• association is in CSS not HTML @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  94. 94. @extend SCSS.error {  border: 1px #f00;  background: #fdd;}.badError {  @extend .error;  border-width: 3px;}.error, .badError {  border: 1px #f00;  background: #fdd;}.badError {  border-width: 3px;} CSS @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  95. 95. TOPICS• What’s Sass/SCSS?• Installing Sass• Variables• Nesting• Mixins• Media Queries• Partials• Inheritance• Gotchas• Links @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  96. 96. gotchas!A few things to watch out for whenworking with SCSS. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  97. 97. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  98. 98. /facepalm• make sure you’re running your compiler• make sure it’s not CSS• watch out for escaping #{values}• be aware of inheritance• when you go back to CSS, don’t forget your inheritance @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  99. 99. codekit@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  100. 100. TOPICS• What’s Sass/SCSS?• Installing Sass• Variables• Nesting• Mixins• Media Queries• Partials• Inheritance• Gotchas• Links @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  101. 101. useful links @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  102. 102. learn more• http://sass-lang.com/• http://www.youtube.com/watch? v=fbVD32w1oTo• https://twitter.com/teamsassdesign• https://twitter.com/scottkellum• http://www.slideshare.net/ginader/sass- compass-and-the-new-tools-open-web- camp-iv @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  103. 103. learn more• http://incident57.com/codekit/• http://compass-style.org/• http://thesassway.com/projects/sass- twitter-bootstrap• http://foundation.zurb.com/• http://zengrids.com/• http://jaredhardy.com/sassy-buttons/ @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012
  104. 104. thank you!feedback, comments, links? @irishstu @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

×