Intro to Sass

If you’ve been writing CSS for awhile now, but haven’t made the jump to preprocessors, this workshop is for you.

It covers the most basic and important features of Sass, one of the most popular and full-featured CSS preprocessors today. Why bother with it? Used responsibly, Sass will make writing CSS faster and maintaining it easier.

The material assumes that you have a working knowledge of HTML and CSS, and have already installed Sass.

Transcript

1. Introduction to Sass Veronica Erb | Jan 2014 | Code(Her) @verbistheword #DCWWCodeHer
2. Please download The zip file at github.com/veronicaerb/sass-intro ✤ And set up your compiler (whichever you’re using) so that it uses playground.scss create the playground.css file. Let one of us know if it’s not working for you! Or, ask your neighbor. She’s smart, too.
3. Welcome! @verbistheword #DCWWCodeHer
4. Two Guidelines Workshop: Let’s learn by doing. People: Let’s learn from each other. @verbistheword #DCWWCodeHer
5. Who has Sass running? Who’s next to you? @verbistheword #DCWWCodeHer
6. Veronica Erb Tony Pitale Matt Dingee Lynn Wallenstein Jason Garber @verbistheword @tpitale @humancompanion @LynnWallenstein @jgarber
7. Two Parts Part One: Basic Sass Concepts Break: 10 min Part Two: Open Dance @verbistheword #DCWWCodeHer
8. 1 Sass Basics •Nesting, Variables, and Operators (15 min) •Preprocessors? (5 min) •Partials and Import (15 min) •Mixins and Extends & Placeholders (15 min) @verbistheword #DCWWCodeHer
9. selector { property: value; property: value; } declaration rule CSS Syntax As she ruled the land, the Chief Selector declared that the land’s properties must have value.
10. @verbistheword #DCWWCodeHer Nesting, Variables, and Operators 15 min
11. @verbistheword #DCWWCodeHer Nesting a { color: blue; &:hover { color: green; } } a { color: blue; } a:hover { color: green; } .css .scss
12. @verbistheword #DCWWCodeHer Nesting .feature { background-color: black; a { color: cyan; &:hover { color: lime; } } } .feature { background-color: black; } .feature a { color: cyan; } .feature a:hover { color: lime; } .css .scss
13. @verbistheword #DCWWCodeHer Variables $primary-color: blue; $secondary-color: green; a { color: $primary-color; &:hover { color: $secondary- color; } } .css a { color: blue; } a:hover { color: green; } .scss
14. @verbistheword #DCWWCodeHer Operators article { float: left; width: 600px / 960px * 100%; } article { float: left; width: 62.5%; } .css .scss
15. @verbistheword #DCWWCodeHer Try it selector { property: value; selector2 { property: value; } &:pseudo-selector { property: value; } } Nesting Variables $variable-name: value; ! selector { property: $variable-name; } Operators selector { property: x + y; property: x - y; property: x * y; property: x / y; } Experiment in playground.scss, or try jsfiddle.net or tinkerbin.heroku.com
16. @verbistheword #DCWWCodeHer Preprocessor? 5 min
17. @verbistheword #DCWWCodeHer CSS
18. @verbistheword #DCWWCodeHer Sass
19. @verbistheword #DCWWCodeHer You are responsible Quality Quality Quality Quality
20. @verbistheword #DCWWCodeHer Partials and Import 15 min
21. @verbistheword #DCWWCodeHer Partials ! body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } .css Look familiar?
22. @verbistheword #DCWWCodeHer Partials /* reset.css */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } .css
23. @verbistheword #DCWWCodeHer Partials /* _reset.scss */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } .scss
24. @verbistheword #DCWWCodeHer Import @import “reset”; a { color: blue; &:hover { color: green; } } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } a { color: blue; } a:hover { color: green; .css .scss
25. @verbistheword #DCWWCodeHer Try It Partial @import ‘filename’; Import ✤ Create a SCSS file that starts with an underscore, “_”, for example, “_filename.scss” ✤ Explore and discuss: How should the code be divided? Why? Experiment in playground.scss, or try jsfiddle.net or tinkerbin.heroku.com
26. @verbistheword #DCWWCodeHer Mixins and 
 Extends & Placeholders 8 min
27. @verbistheword #DCWWCodeHer Mixins .feature { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .css Look familiar?
28. @verbistheword #DCWWCodeHer Mixins @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius; } ! .feature { @include border-radius(3px); } .scss
29. @verbistheword #DCWWCodeHer Mixins .feature { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .css
30. @verbistheword #DCWWCodeHer Extends + Placeholders .message { border: 1px solid gray; padding: 10px; color: #333; } ! .success { border-color: green; } ! .error { border-color: red; } ! .warning { border-color: yellow; } .css Look familiar?
31. @verbistheword #DCWWCodeHer Placeholders %message { border: 1px solid gray; padding: 10px; color: #333; } ! .success { border-color: green; } .success { border-color: green; } .css .scss
32. @verbistheword #DCWWCodeHer Extend %message { border: 1px solid gray; padding: 10px; color: #333; } ! .success { @extend %message; border-color: green; } ! .error { @extend %message; border-color: red; } ! .warning { @extend %message; border-color: yellow; } .scss
33. @verbistheword #DCWWCodeHer Extend .success, .error, .warning { border: 1px solid gray; padding: 10px; color: #333; } ! .success { border-color: green; } ! .error { border-color: red; } ! .warning { border-color: yellow; } .css
34. @verbistheword #DCWWCodeHer Try It @mixin name($value) { property: $value } selector { @include name(value); } Mixin %name { property: value; } Placeholder selector { @extend %name; property: value; } Extend Experiment in playground.scss, or try jsfiddle.net or tinkerbin.heroku.com
35. @verbistheword #DCWWCodeHer Variables 
 and
 Partials & Import 
 and 
 Extends & Placeholders 
 and
 Mixins 8 min Big Picture Edition
36. Partial & Import Variable Extend $variable = value %placeholder { property: value; } _partial.scss $variable $variable $variable @extend %placeholder @import partial Files Values .scss @extend %placeholder Rules
37. Partial & Import Variable Extend $variable $variable $variable @import partial Files Values Rules .css .class-that-extended, 
 .another-one-that-did { }
38. %placeholder { property: value; } @extend %placeholder; @extend %placeholder; .scss @mixin mixin($value) { property: $value; } @include mixin(10px); @include mixin(12px); Extend Mixin Rules Rules + Values (Used most often) (Good for vendor prefixes)
39. .css .class-that-extended, 
 .another-one-that-did { } .class-with-mixin { property: 10px; } .class-also-with-mixin { property: 12px; } Extend Mixin Rules Rules + Values
40. The names of 
 Variables and Partials & Import and Extends & Placeholders and Mixins will make them real— and more maintainable. @verbistheword #DCWWCodeHer
41. Break! 10 min @verbistheword #DCWWCodeHer
42. 2 Open Dance •Explore (40min) •What Sticks (10min) •Wrap-Up (5min) @verbistheword #DCWWCodeHer
43. @verbistheword #DCWWCodeHer Explore 40 min
44. Sassthusiast ✤ Review any of the features from the first hour ✤ Create a layout system using Operators and Variables ✤ Shift your site’s CSS to Sass Sass Master ✤ Install Compass and use its mixins to spruce up the demo site ✤ Install Compass and create a sprite to spruce up the demo site ✤ Install Susy (after installing Compass) and play with responsive grids @verbistheword #DCWWCodeHer
45. @verbistheword #DCWWCodeHer What Sticks? 10 min
46. @verbistheword #DCWWCodeHer Wrap-Up 5 min
47. @verbistheword #DCWWCodeHer Syntax /* SCSS, aka Sassy CSS. Newer. */ ! a { color: blue; &:hover { color: green; } } /* indented syntax, aka Sass. Older. */ ! a color: blue; &:hover color: green; .css .scss
48. Sassy Know-How sass-lang.com/guide ✤ The basics we covered today thesassway.com ✤ Beginner, intermediate, and advanced topics compass-style.org ✤ A Sass pattern library susy.oddbird.net ✤ A Sass responsive grid system @verbistheword #DCWWCodeHer
49. An Event Tomorrow! sassydc.github.io ✤ A monthly meetup in Washington, DC to discuss the latest in Sass, Compass, and Front End Dev ✤ Perspectives on File Structure
 15 Jan 2014 at 6:30pm
 Canvas Coworking Space
 1203 19th St. NW, 3rd Floor
 Washington, DC 20036 ✤ sassydc.eventbrite.com @verbistheword #DCWWCodeHer
50. Veronica Erb Tony Pitale Matt Dingee Lynn Wallenstein Jason Garber @verbistheword @tpitale @humancompanion @LynnWallenstein @jgarber
51. Thank you! veronicaerb.com ! Wanna hang out with Veronica more often? j.mp/verbmail @verbistheword #DCWWCodeHer