Sass + Compass: Getting sassy with CSS.

84eac3a27d1acf0ef0d835d92c999b0d?s=47 Matt Shwery
February 15, 2013

Sass + Compass: Getting sassy with CSS.

CSS is a dumb language. We can use the power of prepocessors like Sass to make writing CSS smart.

Learn about the benefits of using sass (and compass) in your workflow.

84eac3a27d1acf0ef0d835d92c999b0d?s=128

Matt Shwery

February 15, 2013
Tweet

Transcript

  1. @mshwery SASS + COMPASS Getting sassy with css.

  2. @mshwery CSS is verbose

  3. @mshwery CSS is redundant

  4. @mshwery CSS is a dumb language

  5. @mshwery A spoonful of sugar helps.

  6. @mshwery

  7. @mshwery Sass is a “meta-language on top of CSS that’s

    used to describe the style of a document cleanly and structurally, with more power than flat CSS allows.” paraphrased: syntactic sugar for css
  8. @mshwery Sass is a “meta-language on top of CSS that’s

    used to describe the style of a document cleanly and structurally, with more power than flat CSS allows.” paraphrased: syntactic sugar for css
  9. @mshwery Sass is a “meta-language on top of CSS that’s

    used to describe the style of a document cleanly and structurally, with more power than flat CSS allows.” paraphrased: syntactic sugar for css
  10. @mshwery Sass is a “meta-language on top of CSS that’s

    used to describe the style of a document cleanly and structurally, with more power than flat CSS allows.” paraphrased: syntactic sugar for css
  11. @mshwery ȗ preprocessor ȗ extends CSS3 ȗ syntax options ȗ

    ruby
  12. @mshwery ȗ preprocessor Sass watches .scss/.sass files for changes $

    sass --watch app/sass:public/css generates regular CSS files don’t be afraid of the command line (but you don’t have to use it)
  13. @mshwery ȗ extends CSS3 mixins variables nested rules @import (file

    organization) operations (@if, @for, @each, @while)
  14. @mshwery ȗ syntax options .scss – ‘sassy’ css (default) .sass

    – ‘syntactically awesome style sheets’
  15. @mshwery ȗ ruby written in ruby gotta have ruby installed

    (no problem for Unix)
  16. @mshwery VARIABLES ȗ change once ȗ cascade dependencies ȗ themes

    are easy ȗ powerful color functions $primary: #ddd; $second: desaturate($primary, 10%); $font-color: darken($primary, 50%); .button { background-color: $primary; color: $font-color; } .container { background-color: $second; border-color: $primary; } h1, h2, h3, h4, h5, h6 { color: $font-color; }
  17. @mshwery VARIABLES ȗ change once ȗ cascade dependencies ȗ themes

    are easy ȗ powerful color functions $primary: #ddd $second: desaturate($primary, 10%) $font-color: darken($primary, 50%) .button background-color: $primary color: $font-color .container background-color: $second border-color: $primary h1, h2, h3, h4, h5, h6 color: $font-color
  18. @mshwery VARIABLES ȗ change once ȗ cascade dependencies ȗ themes

    are easy ȗ powerful color functions .button { background-color: #dddddd; color: #5e5e5e; } .container { background-color: #f7f7f7; border-color: #dddddd; } h1, h2, h3, h4, h5, h6 { color: #5e5e5e; }
  19. @mshwery LOOPS ȗ if, each, for, while $icons: create view

    edit delete; @each $icon in $icons { .#{$icon} { background-image: url(/imgs/icons/#{$icon}.png); } }
  20. @mshwery LOOPS ȗ if, each, for, while $icons: create view

    edit delete @each $icon in $icons .#{$icon} background-image: url(/imgs/icons/#{$icon}.png)
  21. @mshwery LOOPS ȗ if, each, for, while .create { background-image:

    url(/images/icons/create.png); } .view { background-image: url(/images/icons/view.png); } .edit { background-image: url(/images/icons/edit.png); } .delete { background-image: url(/images/icons/delete.png); }
  22. @mshwery ȗ DRY up your code ȗ modules ȗ forget

    vendor prefixes ȗ reuse! @mixin border-radius($params) { border-radius: $params; -moz-border-radius: $params; -webkit-border-radius: $params; -o-border-radius: $params; } .button { @include border-radius(3px); } .container { @include border-radius(5px); }
  23. @mshwery ȗ DRY up your code ȗ modules ȗ forget

    vendor prefixes ȗ reuse! @mixin border-radius ($params) border-radius: $params -moz-border-radius: $params -webkit-border-radius: $params -o-border-radius: $params .button @include border-radius(3px) .container @include border-radius(5px)
  24. @mshwery ȗ DRY up your code ȗ modules ȗ forget

    vendor prefixes ȗ reuse! .button { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; } .container { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; }
  25. @mshwery NESTING ȗ time-saving ȗ easier to read ȗ avoid

    deep nesting ȗ Rule of 3 .button { background-color: #ddd; color: #5e5e5e; &:hover { background-color: #eaeaea; color: #444; } } .container { background-color: #f7f7f7; border-color: #ddd; h1 { font-size: 2em; } a { @extend .button; } }
  26. @mshwery NESTING ȗ time-saving ȗ easier to read ȗ avoid

    deep nesting ȗ Rule of 3 .button background-color: #ddd color: #5e5e5e &:hover background-color: #eaeaea color: #444 .container background-color: #f7f7f7 border-color: #ddd h1 font-size: 2em a @extend .button
  27. @mshwery NESTING ȗ time-saving ȗ easier to read ȗ avoid

    deep nesting ȗ Rule of 3 .container { background-color: #f7f7f7; border-color: #dddddd; } .container h1 { font-size: 2em; } .container a { background-color: #dddddd; color: #5e5e5e; } .container a:hover { background-color: #eaeaea; color: #444444; }
  28. @mshwery As a rule of thumb, don't nest further than

    3 levels deep. If you find yourself going further, think about reorganizing your rules (either the specificity needed, or the layout of the nesting). – Github CSS Styleguide
  29. @mshwery

  30. @mshwery Compass is an open-source CSS Authoring Framework. paraphrased: clean

    & organized css
  31. @mshwery Compass is an open-source CSS Authoring Framework. paraphrased: clean

    & organized css
  32. @mshwery ȗ structure ȗ library of mixins ȗ free team

    of devs working for you ȗ sprite-making is easy ȗ uses sass ȗ ruby
  33. @mshwery MIXINS ȗ ton of up-to-date styles ȗ forget vendor

    prefixes ȗ no maintenance ȗ standardization @import “compass/css3”; appearance background-clip background-origin background-size border-radius box box-shadow box-sizing columns filter font-face hyphenation inline-block opacity regions text-shadow transform transition
  34. @mshwery SPRITES ȗ automagically combines images into sprites ȗ updates

    your css images/icons/create.png images/icons/edit.png images/icons/delete.png images/icons/view.png @import “icons/*.png”; @include all-icons-sprites;
  35. @mshwery SPRITES ȗ automagically combines images into sprites ȗ updates

    your css ȗ awesomeness .icons-sprite, .icons-create, .icons-edit, .icons-delete, .icons-view { background: url(‘/images/icons-s34fe06.png’) no-repeat; } .icons-create { background-position: 0 0; } .icons-edit { background-position: 0 -32px; } .icons-delete{ background-position: 0 -64px; } .icons-view { background-position: 0 -96px; }
  36. @mshwery BEST PRACTICES ȗ use modules / mixins / variables

    to stay DRY ȗ use @imports to improve file organization ȗ concat & minify ȗ nesting: Rule of 3 ȗ use normalize/reset.css ȗ global.css for global styles ȗ simplicity : KISS
  37. @mshwery Keep It Simple Stupid

  38. @mshwery Keep It Simple Stupid

  39. @TheSassWay @mshwery

  40. #teamSass @mshwery

  41. Thanks! @mshwery