Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Sass

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.

Veronica Erb

January 14, 2014
Tweet

More Decks by Veronica Erb

Other Decks in Programming

Transcript

  1. Introduction to Sass
    Veronica Erb | Jan 2014 | Code(Her)
    @verbistheword #DCWWCodeHer

    View full-size slide

  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.

    View full-size slide

  3. Welcome!
    @verbistheword #DCWWCodeHer

    View full-size slide

  4. Two Guidelines
    Workshop: Let’s learn by doing.
    People: Let’s learn from each other.
    @verbistheword #DCWWCodeHer

    View full-size slide

  5. Who has Sass
    running?
    Who’s next to you?
    @verbistheword #DCWWCodeHer

    View full-size slide

  6. Veronica Erb
    Tony Pitale
    Matt Dingee
    Lynn Wallenstein
    Jason Garber
    @verbistheword
    @tpitale
    @humancompanion
    @LynnWallenstein
    @jgarber

    View full-size slide

  7. Two Parts
    Part One: Basic Sass Concepts
    Break: 10 min
    Part Two: Open Dance
    @verbistheword #DCWWCodeHer

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  10. @verbistheword #DCWWCodeHer
    Nesting, Variables,
    and Operators
    15 min

    View full-size slide

  11. @verbistheword #DCWWCodeHer
    Nesting
    a {
    color: blue;
    &:hover {
    color: green;
    }
    }
    a {
    color: blue;
    }
    a:hover {
    color: green;
    }
    .css
    .scss

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  14. @verbistheword #DCWWCodeHer
    Operators
    article {
    float: left;
    width: 600px / 960px *
    100%;
    }
    article {
    float: left;
    width: 62.5%;
    }
    .css
    .scss

    View full-size slide

  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

    View full-size slide

  16. @verbistheword #DCWWCodeHer
    Preprocessor?
    5 min

    View full-size slide

  17. @verbistheword #DCWWCodeHer
    CSS

    View full-size slide

  18. @verbistheword #DCWWCodeHer
    Sass

    View full-size slide

  19. @verbistheword #DCWWCodeHer
    You are responsible
    Quality
    Quality
    Quality
    Quality

    View full-size slide

  20. @verbistheword #DCWWCodeHer
    Partials and Import
    15 min

    View full-size slide

  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?

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  26. @verbistheword #DCWWCodeHer
    Mixins and 

    Extends &
    Placeholders
    8 min

    View full-size slide

  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?

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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?

    View full-size slide

  31. @verbistheword #DCWWCodeHer
    Placeholders
    %message {
    border: 1px solid gray;
    padding: 10px;
    color: #333;
    }
    !
    .success {
    border-color: green;
    }
    .success {
    border-color: green;
    }
    .css
    .scss

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  35. @verbistheword #DCWWCodeHer
    Variables 

    and

    Partials & Import 

    and

    Extends & Placeholders 

    and

    Mixins
    8 min
    Big Picture
    Edition

    View full-size slide

  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

    View full-size slide

  37. Partial & Import
    Variable Extend
    $variable
    $variable
    $variable
    @import partial
    Files
    Values Rules
    .css
    .class-that-extended, 

    .another-one-that-did {
    }

    View full-size slide

  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)

    View full-size slide

  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

    View full-size slide

  40. The names of 

    Variables and Partials & Import and Extends & Placeholders and Mixins
    will make them real—
    and more
    maintainable.
    @verbistheword #DCWWCodeHer

    View full-size slide

  41. Break! 10 min
    @verbistheword #DCWWCodeHer

    View full-size slide

  42. 2
    Open
    Dance
    •Explore (40min)
    •What Sticks (10min)
    •Wrap-Up (5min)
    @verbistheword #DCWWCodeHer

    View full-size slide

  43. @verbistheword #DCWWCodeHer
    Explore
    40 min

    View full-size slide

  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

    View full-size slide

  45. @verbistheword #DCWWCodeHer
    What Sticks?
    10 min

    View full-size slide

  46. @verbistheword #DCWWCodeHer
    Wrap-Up
    5 min

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  50. Veronica Erb
    Tony Pitale
    Matt Dingee
    Lynn Wallenstein
    Jason Garber
    @verbistheword
    @tpitale
    @humancompanion
    @LynnWallenstein
    @jgarber

    View full-size slide

  51. Thank you!
    veronicaerb.com
    !
    Wanna hang out with Veronica more often?
    j.mp/verbmail
    @verbistheword #DCWWCodeHer

    View full-size slide