Sass

 Sass

A quick introduction to the Sass CSS pre-processor, originally presented at Refresh Rochester in June 2013

E70a3c5fafb85c326fb0b8965b1f6692?s=128

Nathan Henderson

June 25, 2013
Tweet

Transcript

  1. 7.

    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
  2. 8.

    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
  3. 9.

    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
  4. 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 • SCSS = “Sassy CSS” • Default Sass syntax • Superset of CSS3 (CSS is SCSS!) • Nested selectors
  5. 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 • SCSS = “Sassy CSS” • Default Sass syntax • Superset of CSS3 (CSS is SCSS!) • Nested selectors • Nested properties too
  6. 12.

    • 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
  7. 13.

    • 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
  8. 14.

    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
  9. 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 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
  10. 16.

    • “Sass” or “indented” syntax • White space aware (2

    space soft tabs are your friends) • Completely optional (I know, it’s not for everybody) 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
  11. 19.

    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
  12. 20.

    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
  13. 21.

    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
  14. 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 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
  15. 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 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
  16. 25.

    Real World Example // Dimensions $page_width: 960px $nav_tabs: 6 //

    number of navigation tabs $tab_width: round($page_width / $nav_tabs) - 1
  17. 26.

    Real World Example // Dimensions $page_width: 960px $nav_tabs: 7 //

    number of navigation tabs $tab_width: round($page_width / $nav_tabs) - 1
  18. 27.

    Real World Example // Dimensions $page_width: 960px $nav_tabs: 7 //

    number of navigation tabs $tab_width: round($page_width / $nav_tabs) - 1
  19. 28.

    Using Variables ✦ Colors ✦ Font Stacks ✦ Margins &

    Padding ✦ Border widths ✦ Border radii
  20. 34.

    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
  21. 35.

    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)
  22. 36.

    Fun with Mixins ✦ Mixin definitions can include other mixins

    ✦ Try the ‘&’ parent selector ✦ Global variables in mixins
  23. 38.

    @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
  24. 39.

    @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
  25. 40.

    @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
  26. 41.

    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>
  27. 42.

    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> .alert border: 1px #f00 background-color: #eee .criticalAlert border-width: 3px color: #8a0808 .greatGooglyMoogly @extend .alert, .criticalAlert border-style: dashed
  28. 43.

    @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
  29. 44.

    @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
  30. 45.

    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
  31. 48.

    Parent Selector a font-weight: bold text-decoration: none a:hover text-decoration: underline

    a font-weight: bold text-decoration: none &:hover text-decoration: underline
  32. 49.

    @import & Partials @import "rounded-corners", "text-shadow" filenames that start with

    an underscore won’t be compiled into the output directory _rounded-corners.sass _text-shadow.sass
  33. 54.

    Command Line ✦ Requires Ruby ✦ Best to use a

    new(ish) version of Ruby (1.9.3 or higher) ✦ Probably a good idea to use a Ruby version manager (RVM, rbenv, etc.)
  34. 59.

    GUI Apps ✦ CodeKit Mac http://incident57.com/codekit/ ✦ Scout Mac &

    Windows http://mhs.github.io/scout-app/ ✦ Compass.app Mac, Windows, and Linux http://compass.handlino.com ✦ Others
  35. 66.

    Q&A