$30 off During Our Annual Pro Sale. View Details »

Sass Basics #1

jina
April 22, 2014

Sass Basics #1

A beginner-level presentation I gave internally at work to teach the basics of Sass.

jina

April 22, 2014
Tweet

More Decks by jina

Other Decks in Design

Transcript

  1. JINA BOLTON
    SENIOR PRODUCT DESIGNER
    SALESFORCE UX
    Sass Basics #1

    View Slide

  2. Don’t know
    CSS?
    …start there.
    …then come
    back to this :)

    View Slide

  3. you want
    me to use
    what???

    View Slide

  4. 2 weeks later…

    View Slide

  5. omg! omg!
    yay Sass!

    View Slide

  6. Create a GitHub account if
    you don’t have one already.
    It’s free.

    View Slide

  7. WTF is Sass?

    View Slide

  8. Sass, not SASS!

    View Slide

  9. INVENTED 2007 BY
    Hampton
    Catlin

    View Slide

  10. CORE TEAM
    Nathan
    Weizenbaum
    Chris
    Eppstein

    View Slide

  11. compilation

    View Slide

  12. _icons.scss
    _grid.scss
    style.css
    _type.scss

    View Slide

  13. common
    misconceptions

    View Slide

  14. “I don’t know how to use
    the command line.”
    YOU DON’T HAVE TO.

    View Slide

  15. CODEKIT.COM

    View Slide

  16. MHS.GITHUB.IO/SCOUT-APP

    View Slide

  17. “I don’t want to
    learn Ruby.”
    YOU DON’T HAVE TO.

    View Slide

  18. LIBSASS.ORG

    View Slide

  19. “I’ll have to learn a
    whole new syntax.”
    NOT NECESSARILY.

    View Slide

  20. 2 syntaxes…

    View Slide

  21. Sass
    syntactically awesome style sheets
    THE ORIGINAL SYNTAX, .sass EXTENSION
    INDENTED, WHITESPACE-SENSITIVE
    NO CURLY BRACES OR SEMI-COLONS, & PROVIDES MIXIN SHORTCUTS

    View Slide

  22. SCSS
    sassy CSS
    THE NEWER SYNTAX, .scss EXTENSION
    EASIER FOR NEWCOMERS TO LEARN
    IT LOOKS LIKE REGULAR CSS, BUT WITH EXTRA GOODIES

    View Slide

  23. Sass
    SCSS
    h1
    background: #eee
    color: #444
    h2
    font-weight: bold
    color: #222
    h1 {
    background: #eee;
    color: #444;
    }
    h2 {
    font-weight: bold;
    color: #222;
    }

    View Slide

  24. choose your own
    adventure

    View Slide

  25. easier
    maintainability

    View Slide

  26. don’t
    repeat
    yourself

    View Slide

  27. patterns &
    proportions

    View Slide

  28. write less.
    do more. no, not LESS. ;-)

    View Slide

  29. don’t overwhelm yourself.
    start small

    View Slide

  30. SASS-LANG.COM

    View Slide

  31. SASSMEISTER.COM

    View Slide

  32. We’ll use Sassmeister to try
    out Sass.
    We can save our work to
    GitHub gists.

    View Slide

  33. commenting
    with Sass

    View Slide

  34. CSS output
    SCSS
    /*
    * A multiline comment
    * like you see in regular CSS
    */
    /*
    * A multiline comment
    * like you see in regular CSS
    */
    // And a single line comment.

    View Slide

  35. CSS output
    SCSS
    /*
    * A multiline comment
    * like you see in regular CSS
    */
    // And a single line comment.
    in production, usually all comments are stripped…

    View Slide

  36. CSS output
    SCSS
    /*! Copyright 2014 Jina */
    /*! Copyright 2014 Jina */
    // And a single line comment.
    exclamation mark forces multiline comments to render

    View Slide

  37. nesting with Sass

    View Slide

  38. CSS output
    SCSS
    .nav { background: #eee; }
    .nav a { float: left; }
    .nav {
    background: #eee;
    a { float: left; }
    }

    View Slide

  39. CSS output
    SCSS
    .nav { background: #eee; }
    .nav a { float: left; }
    .nav a span { color: #ccc; }
    .nav {
    background: #eee;
    a {
    float: left;
    span { color: #ccc; }
    }
    }

    View Slide

  40. CSS output
    SCSS
    .nav { background: #eee; }
    .nav a { float: left; }
    .nav a :hover {
    text-decoration: none;
    }
    .nav a span { color: #ccc; }
    .nav {
    background: #eee;
    a {
    float: left;
    :hover {
    text-decoration: none;
    }
    span { color: #ccc; }
    }
    }

    View Slide

  41. .nav {
    background: #eee;
    a {
    float: left;
    &:hover {
    text-decoration: none;
    }
    span { color: #ccc; }
    }
    }
    CSS output
    SCSS
    .nav { background: #eee; }
    .nav a { float: left; }
    .nav a:hover {
    text-decoration: none;
    }
    .nav a span { color: #ccc; }

    View Slide

  42. .nav {
    background: #eee;
    a {
    float: left;
    &:hover {
    text-decoration: none;
    }
    .ie-6 & { display: inline; }
    span { color: #ccc; }
    }
    }
    CSS output
    SCSS
    .nav { background: #eee; }
    .nav a { float: left; }
    .nav a:hover {
    text-decoration: none;
    }
    .ie-6 .nav a {
    display: inline;
    }
    .nav a span { color: #ccc; }

    View Slide

  43. .nav {
    background: #eee;
    a {
    float: left;
    @media print { color: #000; }
    &:hover {
    text-decoration: none;
    }
    .ie-6 & { display: inline; }
    span { color: #ccc; }
    }
    }
    CSS output
    SCSS
    .nav { background: #eee; }
    .nav a { float: left; }
    @media print {
    .nav a { color: #000; }
    }
    .nav a:hover {
    text-decoration: none;
    }
    .ie-6 .nav a {
    display: inline;
    }
    .nav a span { color: #ccc; }

    View Slide

  44. .nav {
    background: #eee;
    a {
    float: left;
    @media print { color: #000; }
    &:hover {
    text-decoration: none;
    }
    .ie-6 & { display: inline; }
    span { color: #ccc; }
    }
    }
    Sass syntax
    SCSS syntax
    .nav
    background: #eee
    a
    float: left
    @media print
    color: #000
    &:hover
    text-decoration: none
    .ie-6 &
    display: inline
    span
    color: #ccc

    View Slide

  45. .sidebar {
    border: 1px solid #eee {
    top-color: #fff;
    left: 0;
    }
    }
    CSS output
    SCSS
    .sidebar {
    border: 1px solid #eee;
    border-top-color: #fff;
    border-left: 0;
    }

    View Slide

  46. be careful
    with nesting

    View Slide

  47. body {
    color: #444;
    .sidebar {
    color: #888;
    h2 {
    color: #666;
    a { color: #369; }
    }
    }
    }
    CSS output
    SCSS
    body { color: #444; }
    body .sidebar { color: #888; }
    body .sidebar h2 {
    color: #666;
    }
    body .sidebar h2 a {
    color: #369;
    }

    View Slide

  48. Overly-specific
    CSS is a bitch to
    work with!

    View Slide

  49. more than 3 levels?
    refactor.

    View Slide

  50. variables with Sass

    View Slide

  51. Numbers
    with or without units
    1.2
    13
    10px

    View Slide

  52. Strings of text
    with or without quotes
    "FOO"
    'bar'
    baz

    View Slide

  53. Colors
    named or encoded
    blue
    #04a3f9
    rgba(255, 0, 0, 0.5)

    View Slide

  54. Booleans
    true or false

    View Slide

  55. null

    View Slide

  56. List of values
    separated by commas or spaces
    1.5em 1em 0 2em
    Helvetica, Arial, sans-serif

    View Slide

  57. CSS output
    SCSS
    body { color: #444; }
    a { color: #369; }
    button { background: #369; }
    $text: #444;
    $link: #369;
    body { color: $text; }
    a { color: $link; }
    button { background: $link; }

    View Slide

  58. CSS output
    SCSS
    body { color: #444; }
    a { color: #036; }
    button { background: #036; }
    $text: #444;
    $link: #369;
    $link: #036;
    body { color: $text; }
    a { color: $link; }
    button { color: $link; }

    View Slide

  59. CSS output
    SCSS
    body { color: #222; }
    a { color: #369; }
    $text: #222;
    $text: #444 !default;
    $link: #369 !default;
    body { color: $text; }
    a { color: $link; }

    View Slide

  60. use !default on
    variables for settings
    that may get
    overridden

    View Slide

  61. CSS output
    SCSS
    a { color: #336699; }
    a:hover { color: #2d5986; }
    $link: #369;
    a {
    color: $link;
    &:hover {
    color: darken($link, 5%);
    }
    }

    View Slide

  62. JACKIEBALZER.COM/COLOR

    View Slide

  63. CSS output
    SCSS
    .column {
    margin: 0 16px;
    padding: 0 8px;
    }
    $gutter: 16px;
    .column {
    margin: 0 $gutter;
    padding: 0 ($gutter / 2);
    }

    View Slide

  64. clarity > brevity

    View Slide

  65. stay organized

    View Slide

  66. “Be regular and orderly in your life
    so that you may be violent and
    original in your work.”
    — GUSTAVE FLAUBERT

    View Slide

  67. USE SASSMEISTER TO EXPERIMENT WITH NESTING & VARIABLES.
    BUILD A COLOR PALETTE USING ONE OR TWO BASE COLORS AND LETTING SASS GENERATE
    THE OTHER COLORS.
    NEXT WEEK: MIXINS!
    your homework

    View Slide