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.

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