Kicking Ass with Sass & Compass (2012 Edition)

Kicking Ass with Sass & Compass (2012 Edition)

An updated slide deck of my Sass & Compass talk, delivered at the Fall 2012 Barcamp Rochester at RIT.

E70a3c5fafb85c326fb0b8965b1f6692?s=128

Nathan Henderson

October 06, 2012
Tweet

Transcript

  1. Nathan Henderson WITH SASS AND COMPASS KICKING ASS (CSS for

    awesome people) 2012 EDITION
  2. WAT?

  3. SUPERCHARGED CSS

  4. SASS

  5. Syntactically Awesome Stylesheets

  6. Syntactically Awesome Stylesheets

  7. Syntactically Awesome Stylesheets Sass - Syntactically Awesome Stylesheets http://sass-lang.com/ Search

  8. WHY SASS INSTEAD OF CSS?

  9. body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents

    { width: 800px; } #contents #sidebar { float: right; width: 200px; } #contents #main { width: 600px; background: #eeeeee; } #contents #main h2 { color: blue; } #footer { height: 200px; } CSS body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents { width: 800px; } #contents #sidebar { float: right; width: 200px; } #contents #main { width: 600px; background: #eeeeee; } #contents #main h2 { color: blue; } #footer { height: 200px; } Nested CSS
  10. body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents

    { width: 800px; #sidebar { float: right; width: 200px; } #main { width: 600px; background: #eeeeee; h2 { color: blue; } } } #footer { height: 200px; } SCSS body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents { width: 800px; } #contents #sidebar { float: right; width: 200px; } #contents #main { width: 600px; background: #eeeeee; } #contents #main h2 { color: blue; } #footer { height: 200px; } Nested CSS
  11. body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents

    { width: 800px; #sidebar { float: right; width: 200px; } #main { width: 600px; background: #eeeeee; h2 { color: blue; } } } #footer { height: 200px; } SCSS body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents { width: 800px; } #contents #sidebar { float: right; width: 200px; } #contents #main { width: 600px; background: #eeeeee; } #contents #main h2 { color: blue; } #footer { height: 200px; } Nested CSS
  12. body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents

    { width: 800px; #sidebar { float: right; width: 200px; } #main { width: 600px; background: #eeeeee; h2 { color: blue; } } } #footer { height: 200px; } SCSS • SCSS = “Sassy CSS” • Default Sass syntax • Superset of CSS3 (CSS is SCSS!) • Nested selectors
  13. • SCSS = “Sassy CSS” • Default Sass syntax •

    Superset of CSS3 (CSS is SCSS!) • Nested selectors • Nested properties too body { font: { family: sans-serif; size: 30em; weight: bold; } } #contents { width: 800px; #sidebar { float: right; width: 200px; } #main { width: 600px; background: #eeeeee; h2 { color: blue; } } } #footer { height: 200px; } SCSS
  14. • SCSS = “Sassy CSS” • Default Sass syntax •

    Superset of CSS3 (CSS is SCSS!) • Nested selectors • Nested properties too • Indentation isn’t required, but… body { font: { family: sans-serif; size: 30em; weight: bold; } } #contents { width: 800px; #sidebar { float: right; width: 200px; } #main { width: 600px; background: #eeeeee; h2 { color: blue; } } } #footer { height: 200px; } SCSS
  15. body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents

    { width: 800px; #sidebar { float: right; width: 200px; } #main { width: 600px; background: #eeeeee; h2 { color: blue; } } } #footer { height: 200px; } SCSS
  16. body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents

    { width: 800px; #sidebar { float: right; width: 200px; } #main { width: 600px; background: #eeeeee; h2 { color: blue; } } } #footer { height: 200px; } SCSS body font-family: sans-serif font-size: 30em font-weight: bold #contents width: 800px #sidebar float: right width: 200px #main width: 600px background: #eeeeee h2 color: blue #footer height: 200px Sass
  17. body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents

    { width: 800px; #sidebar { float: right; width: 200px; } #main { width: 600px; background: #eeeeee; h2 { color: blue; } } } #footer { height: 200px; } SCSS body font-family: sans-serif font-size: 30em font-weight: bold #contents width: 800px #sidebar float: right width: 200px #main width: 600px background: #eeeeee h2 color: blue #footer height: 200px Sass
  18. • “Sass” or “indented” syntax • White space aware (2

    space soft tabs are your friends) • Cleaner than CSS body font-family: sans-serif font-size: 30em font-weight: bold #contents width: 800px #sidebar float: right width: 200px #main width: 600px background: #eeeeee h2 color: blue #footer height: 200px Sass
  19. body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents

    { width: 800px; } #contents #sidebar { float: right; width: 200px; } #contents #main { width: 600px; background: #eeeeee; } #contents #main h2 { color: blue; } #footer { height: 200px; } CSS body font-family: sans-serif font-size: 30em font-weight: bold #contents width: 800px #sidebar float: right width: 200px #main width: 600px background: #eeeeee h2 color: blue #footer height: 200px Sass
  20. body font-family: sans-serif font-size: 30em font-weight: bold #contents width: 800px

    #sidebar float: right width: 200px #main width: 600px background: #eeeeee h2 color: blue #footer height: 200px Sass • “Sass” or “indented” syntax • White space aware (2 space soft tabs are your friends) • Cleaner than CSS, but so what?
  21. THE GOOD STUFF • Variables

  22. VARIABLES body font-family: sans-serif font-size: 30em font-weight: bold #contents width:

    800px #sidebar float: right width: 200px #main width: 600px background: #eeeeee h2 color: blue #footer height: 200px // Variable Definitions $page-width: 800px $sidebar-width: 200px $primary-color: #eeeeee
  23. VARIABLES body font-family: sans-serif font-size: 30em font-weight: bold #contents width:

    800px #sidebar float: right width: 200px #main width: 600px background: #eeeeee h2 color: blue #footer height: 200px // Variable Definitions $page-width: 800px $sidebar-width: 200px $primary-color: #eeeeee body font-family: sans-serif font-size: 30em font-weight: bold #contents width: $page-width #sidebar float: right width: $sidebar-width #main width: ??? background: $primary-color h2 color: blue #footer height: 200px
  24. VARIABLES body font-family: sans-serif font-size: 30em font-weight: bold #contents width:

    800px #sidebar float: right width: 200px #main width: 600px background: #eeeeee h2 color: blue #footer height: 200px // Variable Definitions $page-width: 800px $sidebar-width: 200px $primary-color: #eeeeee body font-family: sans-serif font-size: 30em font-weight: bold #contents width: $page-width #sidebar float: right width: $sidebar-width #main width: ??? background: $primary-color h2 color: blue #footer height: 200px
  25. VARIABLES body font-family: sans-serif font-size: 30em font-weight: bold #contents width:

    800px #sidebar float: right width: 200px #main width: 600px background: #eeeeee h2 color: blue #footer height: 200px // Variable Definitions $page-width: 800px $sidebar-width: 200px $primary-color: #eeeeee body font-family: sans-serif font-size: 30em font-weight: bold #contents width: $page-width #sidebar float: right width: $sidebar-width #main width: ??? background: $primary-color h2 color: blue #footer height: 200px body font-family: sans-serif font-size: 30em font-weight: bold #contents width: $page-width #sidebar float: right width: $sidebar-width #main width: $page-width - $sidebar-width background: $primary-color h2 color: blue #footer height: 200px
  26. VARIABLES body font-family: sans-serif font-size: 30em font-weight: bold #contents width:

    800px #sidebar float: right width: 200px #main width: 600px background: #eeeeee h2 color: blue #footer height: 200px // Variable Definitions $page-width: 800px $sidebar-width: 200px $primary-color: #eeeeee body font-family: sans-serif font-size: 30em font-weight: bold #contents width: $page-width #sidebar float: right width: $sidebar-width #main width: ??? background: $primary-color h2 color: blue #footer height: 200px body font-family: sans-serif font-size: 30em font-weight: bold #contents width: $page-width #sidebar float: right width: $sidebar-width #main width: $page-width - $sidebar-width background: $primary-color h2 color: blue #footer height: 200px MATH
  27. EXAMPLE FO’ REALZ

  28. EXAMPLE FO’ REALZ

  29. EXAMPLE FO’ REALZ // Dimensions $page_width: 960px $nav_tabs: 6 //

    number of navigation tabs $tab_width: round($page_width / $nav_tabs) - 1
  30. EXAMPLE FO’ REALZ // Dimensions $page_width: 960px $nav_tabs: 7 //

    number of navigation tabs $tab_width: round($page_width / $nav_tabs) - 1
  31. EXAMPLE FO’ REALZ // Dimensions $page_width: 960px $nav_tabs: 7 //

    number of navigation tabs $tab_width: round($page_width / $nav_tabs) - 1
  32. USING VARIABLES • Colors • Font Stacks • Margins &

    Padding • Border widths • Border radii
  33. THE GOOD STUFF • Variables • Mixins

  34. MIXINS

  35. MIXINS @mixin large-text font-family: Helvetica, Arial, sans-serif font-size: 20px font-weight:

    bold color: #ff0000 #content h1 @include large-text
  36. MORE MIXINS

  37. MORE MIXINS @mixin ez-border($width, $color) border-width: $width border-style: solid border-color:

    $color #aboutbox @include ez-border(2px, #eee)
  38. MORE MIXINS @mixin ez-border($width, $color) border-width: $width border-style: solid border-color:

    $color #aboutbox @include ez-border(2px, #eee) @mixin ez-border($width: 2px, $color: #eee) border-width: $width border-style: solid border-color: $color #aboutbox @include ez-border
  39. MORE MIXINS @mixin ez-border($width, $color) border-width: $width border-style: solid border-color:

    $color #aboutbox @include ez-border(2px, #eee) @mixin ez-border($width: 2px, $color: #eee) border-width: $width border-style: solid border-color: $color #aboutbox @include ez-border #aboutbox @include ez-border(1px, #444)
  40. FUN WITH MIXINS • Mixin definitions can include other mixins

    • Try the ‘&’ parent selector • Global variables in mixins
  41. THE GOOD STUFF • Variables • Mixins • Selector Inheritance

    “@extend”
  42. @EXTEND <div class="alert criticalAlert"> Oh snap! The roof is on

    fire! </div> .alert border: 1px #f00 background-color: #eee .criticalAlert border-width: 3px color: #8a0808
  43. @EXTEND <div class="alert criticalAlert"> Oh snap! The roof is on

    fire! </div> .alert border: 1px #f00 background-color: #eee .criticalAlert border-width: 3px color: #8a0808 .alert border: 1px #f00 background-color: #eee .criticalAlert @extend .alert border-width: 3px color: #8a0808
  44. @EXTEND <div class="alert criticalAlert"> Oh snap! The roof is on

    fire! </div> .alert border: 1px #f00 background-color: #eee .criticalAlert border-width: 3px color: #8a0808 <div class="criticalAlert"> Oh snap! The roof is on fire! </div> .alert border: 1px #f00 background-color: #eee .criticalAlert @extend .alert border-width: 3px color: #8a0808
  45. MULTIPLE @EXTENDS .alert border: 1px #f00 background-color: #eee .criticalAlert border-width:

    3px color: #8a0808 .greatGooglyMoogly @extend .alert @extend .criticalAlert border-style: dashed <div class="greatGooglyMoogly"> Oh snap! The roof is on fire! </div>
  46. @EXTEND VS. MIXINS @extend modifies selectors, mixins add properties &

    values .alert border: 1px #f00 background-color: #eee .criticalAlert @extend .alert border-width: 3px color: #8a0808 Sass Input (@extend) .alert, .criticalAlert border: 1px #f00 background-color: #eee .criticalAlert border-width: 3px color: #8a0808 CSS Output
  47. @EXTEND VS. MIXINS @extend modifies selectors, mixins add properties &

    values @mixin alert border: 1px #f00 background-color: #eee .criticalAlert @mixin alert border-width: 3px color: #8a0808 Sass Input (@mixin) .criticalAlert border: 1px #f00 background-color: #eee border-width: 3px color: #8a0808 CSS Output
  48. PLACEHOLDER SELECTOR %-prefixed selectors don’t get rendered to CSS %alert

    border: 1px #f00 background-color: #eee .criticalAlert @extend %alert border-width: 3px color: #8a0808 Sass Input .criticalAlert border: 1px #f00 background-color: #eee .criticalAlert border-width: 3px color: #8a0808 CSS Output
  49. THE GOOD STUFF • Variables • Mixins • Selector Inheritance

    “@extend” • Other goodies
  50. PARENT SELECTORS a font-weight: bold text-decoration: none a:hover text-decoration: underline

    a font-weight: bold text-decoration: none &:hover text-decoration: underline
  51. @IMPORT & PARTIALS @import "rounded-corners", "text-shadow" filenames that start with

    an underscore won’t be compiled into files _rounded-corners.sass _text-shadow.sass
  52. USING SASS sass input.sass output.css sass --watch input.sass:output.css sass --watch

    app/sass:public/stylesheets or…
  53. COMPASS

  54. None
  55. Compass http://compass-style.com/ Search

  56. WHAT IS IT? • Extends Sass to be a full-fledged

    stylesheet framework • Mixins, helpers, new functions, resets & more
  57. CSS3 HELPERS -webkit-border-radius: 4px -moz-border-radius: 4px -o-border-radius: 4px -ms-border-radius: 4px

    -khtml-border-radius: 4px border-radius: 4px @import "compass/css3/border-radius" @include border-radius(4px)
  58. OTHER HELPERS @include adjust-lightness($color, $amount) Color: @include font-face($name, $font-files, $eot)

    Fonts: @include clearfix Clearfix: @include horizontal-list($padding, $direction) List Nav: and many more! @import "icon/*.png" @include all-icon-sprites Spriting:
  59. USING COMPASS compass create /path/to/project cd /path/to/project compass watch Manually:

    or…
  60. TOOLS THAT USE SASS & COMPASS • Middleman http://middlemanapp.com •

    CodeKit http://incident57.com/codekit/ • Scout http://mhs.github.com/scout-app/ • Many other Ruby-based projects, including Rails
  61. WHY USE SASS & COMPASS?

  62. • Keep your stylesheets DRY • Revisions are easier (no

    more “find & replace all”) • Bleeding edge CSS properties become production-ready • Build reuseable mixins & functions • Create your own stylesheet framework • You’ll be awesome
  63. THANK YOU @nathos http://nathos.com @nex3 & @chriseppstein http://sass-lang.com http://compass-style.org