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. Sass Nathan Henderson Refresh Rochester – 6/25/2013

  2. CSS & pre-processors

  3. Syntactically Awesome Stylesheets

  4. Syntactically Awesome Stylesheets

  5. http://sass-lang.com

  6. Sass Basics

  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  17. The Good Stuff

  18. The Good Stuff ✦ Variables

  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
  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
  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
  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
  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
  24. Real World Example

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

    number of navigation tabs $tab_width: round($page_width / $nav_tabs) - 1
  26. Real World Example // Dimensions $page_width: 960px $nav_tabs: 7 //

    number of navigation tabs $tab_width: round($page_width / $nav_tabs) - 1
  27. Real World Example // Dimensions $page_width: 960px $nav_tabs: 7 //

    number of navigation tabs $tab_width: round($page_width / $nav_tabs) - 1
  28. Using Variables ✦ Colors ✦ Font Stacks ✦ Margins &

    Padding ✦ Border widths ✦ Border radii
  29. The Good Stuff ✦ Variables ✦ Mixins

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

    bold color: #ff0000
  31. Mixins @mixin large-text font-family: Helvetica, Arial, sans-serif font-size: 20px font-weight:

    bold color: #ff0000 #content h1 @include large-text
  32. More Mixins @mixin ez-border($width, $color) border-width: $width border-style: solid border-color:

    $color
  33. More Mixins @mixin ez-border($width, $color) border-width: $width border-style: solid border-color:

    $color #aboutbox @include ez-border(2px, #eee)
  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
  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)
  36. Fun with Mixins ✦ Mixin definitions can include other mixins

    ✦ Try the ‘&’ parent selector ✦ Global variables in mixins
  37. The Good Stuff ✦ Variables ✦ Mixins ✦ Selector Inheritance

    “@extend”
  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
  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
  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
  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>
  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
  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
  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
  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
  46. The Good Stuff ✦ Variables ✦ Mixins ✦ Selector Inheritance

    “@extend” ✦ Other goodies
  47. Parent Selector a font-weight: bold text-decoration: none a:hover text-decoration: underline

  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
  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
  50. Installing and Using Sass

  51. Installing and Using Sass Command Line

  52. Installing and Using Sass Command Line GUI Apps

  53. Installing and Using Sass Command Line GUI Apps Other frameworks,

    templates, and project generators
  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.)
  55. Installing Sass gem install sass

  56. Using Sass sass input.sass output.css

  57. Using Sass sass input.sass output.css sass --watch input.sass:output.css

  58. Using Sass sass input.sass output.css sass --watch input.sass:output.css sass --watch

    app/sass:public/stylesheets
  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
  60. Other frameworks, templates, and project generators ✦ Yeoman http://yeoman.io ✦

    Middleman http://middlemanapp.com
  61. Also built into… codepen.io

  62. More Awesome Stuff

  63. http://compass-style.org

  64. http://susy.oddbird.net

  65. Around the Interwebs Demo time!

  66. Q&A

  67. Convinced?

  68. @nathos nathos@nathos.com