An Introduction to Sassy CSS

An Introduction to Sassy CSS

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.

Footnote: for Windows PC users, here's a batch file from @puppybeard "@irishstu cheers for the Sass talk, I mentioned batch files for Windows users in Q&A, here's one db.tt/2gY9tJvS (how-to in file)"

B75613258830be5e7c0e2b0bd774cedd?s=128

Stewart Curry

July 18, 2012
Tweet

Transcript

  1. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    An Introduction to Sassy CSS Stewart Curry
  2. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    Who is This Guy? Web Designer for 15 years or so Table-based layouts & spacer gifs CSS changed all that SCSS is CSS only better woop.ie - iteration, modules, themes, templates
  3. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    past simple
  4. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

  5. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    now complicated
  6. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

  7. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    design everywhere
  8. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

          
  9. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    SASS MAKES CSS FUN AGAIN www.sass-lang.com Basically, CSS made flexible & awesome by adding in cool features.
  10. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    TOPICS • What’s Sass/SCSS? • Installing Sass • Variables • Nesting • Mixins • Media Queries • Partials • Inheritance • Gotchas • Links
  11. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    There Will be Code
  12. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    TOPICS • What’s Sass/SCSS? • Installing Sass • Variables • Nesting • Mixins • Media Queries • Partials • Inheritance • Gotchas • Links
  13. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    “ 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
  14. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    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; }
  15. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    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!
  16. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    so you can • experiment more • make global changes quickly • make reusable modules • use frameworks more effectively • handle RWD neatly • have less cluttered code
  17. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    workflow css images scripts index.html
  18. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    workflow css images scripts index.html sass
  19. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    workflow css images scripts index.html sass style.scss
  20. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    workflow style.scss ⚙ processor style.css
  21. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    workflow css images scripts index.html sass style.scss style.css
  22. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    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).
  23. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    Y U NO USE LESS.JS?
  24. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    TOPICS • What’s Sass/SCSS? • Installing Sass • Variables • Nesting • Mixins • Media Queries • Partials • Inheritance • Gotchas • Links
  25. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

  26. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

  27. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    Install Ruby rubyinstaller.org $ sudo gem install sass $ sass --watch style.scss:style.css
  28. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    http://incident57.com/codekit/
  29. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    TOPICS • What’s Sass/SCSS? • Installing Sass • Variables • Nesting • Mixins • Media Queries • Partials • Inheritance • Gotchas • Links
  30. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    “ $variables variables allow you to use the same value in multiple places, as well as perform basic maths and functions.
  31. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    why variables rock Change one variable and you change it everywhere. Save hours of search & replacing. Experiment with small changes in margins & gutters. Reskin with different colours...
  32. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    $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;
  33. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    $variables • use instead of a value h1 { color: $primarycolor; font-family: $mainfont; font-size: $basetypesize; margin: 0 0 $margin 0; } SCSS h1 { color: red; font-family: "Open Sans", Arial, Sans-Serif; font-size: 1em; margin: 0 0 16px 0; } CSS $primarycolor : red $mainfont : “Open Sans... $basetypesize : 1em $margin : 16px
  34. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    operations • maths: + - / * • color: darken, lighten, saturation, opacity • http://sass-lang.com/docs/yardoc/Sass/ Script/Functions.html
  35. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    operations .island { background: darken($primarycolor,10%); width: $column*4; margin: $margin*2 $margin/2 $margin+20 $margin; padding: $margin*0.25; } SCSS .island { background: #cc0000; width: 160px; margin: 32px 8px 36px 16px; padding: 4px; } CSS $primarycolor : red $column : 40px $margin : 16px
  36. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    escaping • wrap with #{ } • useful for paths p { font: #{$basetypesize}/#{$basetypesize*1.5} $mainfont; } SCSS p { font: 1em/1.5em "Open Sans", Arial, Sans-Serif; } CSS $basetypesize : 1em
  37. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    negatives • minus symbols • -64px -32px 0 16px • top: -96px; right , left are 0; bottom is 16px .moveup { margin:-$margin*4 -$margin*2 0 $margin; } SCSS .moveup { margin: -96px 0 16px; } CSS $margin : 16px
  38. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    negatives • wrap in brackets • (-$variable*value) .moveup { margin:(-$margin*4) (-$margin*2) 0 $margin; } SCSS .moveup { margin: -64px -32px 0 16px; } CSS $margin : 16px
  39. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    TOPICS • What’s Sass/SCSS? • Installing Sass • Variables • Nesting • Mixins • Media Queries • Partials • Inheritance • Gotchas • Links
  40. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    “ nesting Sass avoids repetition by nesting selectors within one another. The same thing works with properties. www.sass-lang.com
  41. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    why nesting rocks Write a hell of a lot less CSS. Avoid repetion. Use indentation to quickly scan and see relationships. Use ampersands for awesomeness.
  42. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    write html as normal <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> HTML
  43. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    nest & indent nav { 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; } } } } SCSS $mainfont : “Open Sans... $margin : 16px
  44. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    nest & indent nav { 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; } CSS $mainfont : “Open Sans... $margin : 16px
  45. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    selectors em { font: { family: Georgia, Serif; style: normal; weight: bold; variant: small-caps; } } SCSS em { font-family: Georgia, Serif; font-style: normal; font-weight: bold; font-variant: small-caps; } CSS
  46. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    & ampersand
  47. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    & ampersand • pulls the parent selector into the & #fancybox { li a.fancy { &:link { color: $primarycolor; } &:visited { color: darken($primarycolor,20%); } &:hover { color: lighten($primarycolor,10%); } } } SCSS #fancybox li a.fancy:link { color: #993333; } #fancybox li a.fancy:visited { color: #4d1919; } #fancybox li a.fancy:hover { color: #bf4040; } CSS $primarycolor : #993333
  48. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    ampersand & • prepends before parent selector #fancybox { li a.fancy { &:link { color: $primarycolor; } &:hover { color: lighten($primarycolor,10%); } body#checkout & { border:1px solid $primarycolor; } } } SCSS #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 $primarycolor : #993333
  49. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    ampersand & • use with HTML body classes #browserwars { border: 1px solid red; .ie8 &, .ie9 & { border: 1px solid blue; } .ie10 & { border: 1px solid green; } } SCSS
  50. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    ampersand & • use with HTML body classes #browserwars { border: 1px solid red; } .ie8 #browserwars, .ie9 #browserwars { border: 1px solid blue; } .ie10 #browserwars { border: 1px solid green; } CSS
  51. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    ampersand & • use with HTML body classes $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; } } } SCSS $size : 16px
  52. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    ampersand & • use with HTML body classes h1 { font-family: Arial, sans-serif; font-size: 16px; } .wf-active h1 { font-family: "proxima-nova-extra-condensed", Arial, sans-serif; font-size: 24px; } CSS $size : 16px
  53. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    TOPICS • What’s Sass/SCSS? • Installing Sass • Variables • Nesting • Mixins • Media Queries • Partials • Inheritance • Gotchas • Links
  54. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    “ @mixins mixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them arguments. www.sass-lang.com
  55. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    why mixins rock Reduce massive chunks of CSS into reusable includes that you can use over and over again.
  56. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    http://compass-style.org/
  57. @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) @mixin roundcorner ($radius: 4px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; }
  58. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    @mixin • call it with @include .fancybox { width: 100px; @include roundcorner(10); } SCSS .fancybox { width: 100px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } CSS
  59. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    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; }
  60. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    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));
  61. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    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); }
  62. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    type @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); } $grid : 20px $lineheight : 1em
  63. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    type h1 { font-size: 35px; font-size: 2.188rem; line-height: 40px; line-height: 2.5rem; margin: 0 0 20px 0; } CSS $grid : 20px $lineheight : 1em
  64. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    @each $social: twitter facebook linkedin; @mixin social-icons { @each $icon in $social { .social-#{$icon} { background: url("images/#{$icon}.png") no-repeat; } } } .social { @include social-icons; } SCSS
  65. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    it’s a loop! .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; } CSS
  66. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    retina @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) } SCSS
  67. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    retina #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"); } } CSS
  68. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    ampersand & • make it a mixin to reuse @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); } SCSS
  69. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    TOPICS • What’s Sass/SCSS? • Installing Sass • Variables • Nesting • Mixins • Media Queries • Partials • Inheritance • Gotchas • Links
  70. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    “ @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
  71. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    why media queries rock Make responsive layouts. Associate media queries more closley with the element you are changeing.
  72. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    @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
  73. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    @media .sidebar { float: right; width: 300px; @media screen and (max-width: 480px) { float: none; width: 100%; } } SCSS .sidebar { float: right; width: 300px; } @media screen and (max-width: 480px) { .sidebar { float: none; width: 100%; } } CSS
  74. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    #logo #menu #content #leftnav #footer 1 2 3 4 5
  75. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    #logo #menu #content #leftnav #footer 1 2 3 4 5
  76. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    @media @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}; } SCSS
  77. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    @media @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); } } } SCSS
  78. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    #logo #menu #content #leftnav #footer 1 2 3 4 5 1 2 3 4 5
  79. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    3.2 coming soon
  80. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    @media • variables in queries • Sass 3.2 alpha • other cool stuff You can’t use this yet - watch https://github.com/nex3/sass/
  81. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    @media You can’t use this yet - watch https://github.com/nex3/sass/ @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; } } SCSS http://thesassway.com/intermediate/responsive-web-design-part-2#the_future_of_media_queries_in_sass
  82. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    TOPICS • What’s Sass/SCSS? • Installing Sass • Variables • Nesting • Mixins • Media Queries • Partials • Inheritance • Gotchas • Links
  83. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    “ _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.
  84. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    why partials rock Include files for CSS. Make your files more managable by breaking them into discreet external modules.
  85. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    _partials • filename starts with an underscore • e.g. “_grid.scss” • import it into your .scss file • @import "grid"; • save on HTTP requests • better structure
  86. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    workflow _reset.scss _grid.scss _type.scss style.scss ⚙ processor style.css
  87. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

  88. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

  89. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    examples • Separate partials for: • grids, typography, colours, forms, tables • mixins & variables • different post types for blogs • adverts • media queries • site sub-sections
  90. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    TOPICS • What’s Sass/SCSS? • Installing Sass • Variables • Nesting • Mixins • Media Queries • Partials • Inheritance • Gotchas • Links
  91. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    “ @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
  92. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    why extend rocks Lets you add styles from one selector to another, as well as its own styles.
  93. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    @extend • nest @extend .classname; • goes inside another class • don’t have to use multiple classes • association is in CSS not HTML
  94. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    @extend .error { border: 1px #f00; background: #fdd; } .badError { @extend .error; border-width: 3px; } SCSS .error, .badError { border: 1px #f00; background: #fdd; } .badError { border-width: 3px; } CSS
  95. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    TOPICS • What’s Sass/SCSS? • Installing Sass • Variables • Nesting • Mixins • Media Queries • Partials • Inheritance • Gotchas • Links
  96. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    gotchas! A few things to watch out for when working with SCSS.
  97. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

  98. @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 aware of inheritance • when you go back to CSS, don’t forget your inheritance
  99. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    codekit
  100. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    TOPICS • What’s Sass/SCSS? • Installing Sass • Variables • Nesting • Mixins • Media Queries • Partials • Inheritance • Gotchas • Links
  101. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    useful links
  102. @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/teamsassdesign • https://twitter.com/scottkellum • http://www.slideshare.net/ginader/sass- compass-and-the-new-tools-open-web- camp-iv
  103. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    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/
  104. @IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

    thank you! feedback, comments, links? @irishstu