Intro to Sass

1f212c6039f890f5ab5e1f89d752c33e?s=47 Veronica Erb
January 14, 2014

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.

1f212c6039f890f5ab5e1f89d752c33e?s=128

Veronica Erb

January 14, 2014
Tweet

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