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

AWDG: Preprocess All the Things!

@cdharrison
February 06, 2014

AWDG: Preprocess All the Things!

Audience: Atlanta Web Design Group
Location: MailChimp HQ, Atlanta GA
Synopsis: An introductory talk on CSS Preprocessors covering LESS, Stylus & Sass (SCSS).

This was output from Reveal.js and has a few display issues. I'll upload a better version when I can clean the output up. In the meantime, you can view slidedeck here as well: http://cdharrison.com/presentations/awdgcss/

@cdharrison

February 06, 2014
Tweet

More Decks by @cdharrison

Other Decks in Programming

Transcript

  1. PREPROCESS
    ALL THE THINGS!
    An Introduction to CSS Preprocessors
    ·
    Chris Harrison @cdharrison
    Atlanta Web Design Group · 6 Feb 2014
    0

    View Slide

  2. Hi, I'm Chris!
    Made my first website in 1996
    Front-End Designer/Developer for
    Organizer/Founder of
    Co-Founder/Member of
    Adobe Influencer
    Morris
    RefreshAugusta
    TheClubhou.se

    View Slide

  3. HASHTAG ALL THE THINGS!
    #AWDGCSS

    View Slide

  4. View Slide

  5. Before CSS
    The look of elements was controlled via inline attributes:
    <
    p
    >
    <
    f
    o
    n
    t c
    o
    l
    o
    r
    =
    "
    #
    f
    f
    e
    1
    0
    0
    " s
    i
    z
    e
    =
    "
    2
    " f
    a
    c
    e
    =
    "
    P
    a
    p
    y
    r
    u
    s
    "
    >
    <
    b
    >
    <
    b
    l
    i
    n
    k
    >
    2 L
    E
    G
    I
    T 2 Q
    U
    I
    T
    <
    /
    b
    l
    i
    n
    k
    >
    <
    /
    b
    >
    <
    b
    r
    >
    <
    i
    >
    H
    E
    Y H
    E
    Y
    <
    /
    i
    >
    <
    /
    f
    o
    n
    t
    >
    <
    /
    p
    >
    In short: it was painful to author/maintain.

    View Slide

  6. And then CSS happened.
    And we were able to use like this...
    <
    p s
    t
    y
    l
    e
    =
    "
    c
    o
    l
    o
    r
    :
    #
    f
    f
    e
    1
    0
    0
    ; f
    o
    n
    t
    -
    s
    i
    z
    e
    :
    2
    ; f
    o
    n
    t
    -
    f
    a
    m
    i
    l
    y
    :
    P
    a
    p
    y
    r
    u
    s
    ;
    "
    >
    Z
    O
    M
    G
    O
    S
    H
    .
    <
    /
    p
    >
    (Which wasn't much better than inline
    attributes.)

    View Slide

  7. Or this...
    (Via Inline Stylesheets)
    <
    s
    t
    y
    l
    e
    >
    <
    /
    s
    t
    y
    l
    e
    >
    <
    p
    >
    Z
    O
    M
    G
    ! N
    o i
    n
    l
    i
    n
    e s
    t
    y
    l
    e
    s
    ?
    ! D
    O
    U
    B
    L
    E R
    A
    I
    N
    B
    O
    W
    !
    <
    /
    p
    >
    p
    {
    c
    o
    l
    o
    r
    : #
    f
    f
    e
    1
    0
    0
    ;
    f
    o
    n
    t
    -
    s
    i
    z
    e
    : 2
    ;
    f
    o
    n
    t
    -
    f
    a
    m
    i
    l
    y
    : P
    a
    p
    y
    r
    u
    s
    ;
    }

    View Slide

  8. Or this...
    Where we finally separated style from content
    via external stylesheets!
    <
    s
    t
    y
    l
    e
    >
    <
    /
    s
    t
    y
    l
    e
    >
    <
    p
    >
    Z
    O
    M
    G
    ! N
    o s
    t
    y
    l
    e
    s i
    n m
    y H
    T
    M
    L
    ?
    ! D
    O
    U
    B
    L
    E R
    A
    I
    N
    B
    O
    W
    !
    <
    /
    p
    >
    @
    i
    m
    p
    o
    r
    t u
    r
    l
    (
    /
    m
    y
    /
    a
    w
    e
    s
    o
    m
    e
    /
    s
    t
    y
    l
    e
    s
    h
    e
    e
    t
    .
    c
    s
    s
    )
    ;
    It was magical, trust me.

    View Slide

  9. But CSS is far from perfect.
    No variables
    Multiple HTTP Requests
    Non-Reusable
    PITA Browser Prefixes

    View Slide

  10. Fortunately,
    there's a better way!

    View Slide

  11. But first, a Disclaimer:
    CSS Preprocessors won't fix
    terrible CSS.

    View Slide

  12. What's a CSS Preprocessor?
    CSS Preprocessors compile the CSS we write in a processed language
    into the pure CSS syntax we're all used to.

    View Slide

  13. Why use a CSS Preprocessor?
    Frameworks, Variables, Mixins
    Modular, Reusable, Extendable CSS
    DRY Syntax (Don't Repeat Yourself)
    And...

    View Slide

  14. If you can write CSS, you can
    write LESS, Sass, or Stylus.

    View Slide

  15. Popularity of CSS Preprocessors
    Sass 5%
    Scss 13%
    LESS 23%
    Stylus 3%
    I don't like any of them 7%
    I don't have a preference 2%
    I've never tried any of them 46%
    Other 1%
    [June 2012] CSS Tricks: Popularity of CSS Preprocessors — hrrsn.me/TmDg

    View Slide

  16. View Slide

  17. LESS
    Written in Javascript, LESS extends CSS with dynamic behaviors like
    variables, mixins, operations, and functions.
    - couple with l
    e
    s
    s
    .
    j
    s you can embed just like CSS.
    lesscss.org

    View Slide

  18. Basic LESS Usage
    <
    l
    i
    n
    k r
    e
    l
    =
    "
    s
    t
    y
    l
    e
    s
    h
    e
    e
    t
    /
    l
    e
    s
    s
    " t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    /
    c
    s
    s
    " h
    r
    e
    f
    =
    "
    s
    t
    y
    l
    e
    s
    .
    l
    e
    s
    s
    "
    >
    <
    s
    c
    r
    i
    p
    t s
    r
    c
    =
    "
    l
    e
    s
    s
    .
    j
    s
    " t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    /
    j
    a
    v
    a
    s
    c
    r
    i
    p
    t
    "
    >
    <
    /
    s
    c
    r
    i
    p
    t
    >

    View Slide

  19. View Slide

  20. Sass
    Written in Ruby, Sass also extends CSS by adding nested rules, variables,
    mixins, functions, and much more. Two syntaxes:
    - concise, omits colons and brackets
    - functions as an extension of CSS syntax
    sass-lang.com

    View Slide

  21. View Slide

  22. Stylus
    Expressive, robust, feature-rich CSS language built for nodejs. Supports
    both an indented syntax and regular CSS style.
    - optionally omit colons, semi-colons, brackets and more
    learnboost.github.io/stylus/

    View Slide

  23. How can I use a
    CSS Preprocessor?
    Compile Locally
    Client-side Compiling
    Compile and Cache On-Demand (Server-Side)
    Compile on Deploy
    Jeff Croft: Many Ways to Use a CSS Preprocessor — hrrsn.me/TmUz

    View Slide

  24. Just starting out?
    Use a GUI
    Some of them are really, really good.

    View Slide

  25. View Slide

  26. Codekit
    Process Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript and
    Compass files automatically each time you save.
    incident57.com/codekit/

    View Slide

  27. View Slide

  28. Compass.app
    Compass.app is a menubar only app for Sass and Compass. It helps
    designers compile stylesheets easily without resorting to command line
    interface.
    compass.kkbox.com

    View Slide

  29. View Slide

  30. Koala
    Koala is a GUI application for Less, Sass, Compass and CoffeeScript
    compilation, to help web developers to use them more efficiently.
    koala-app.com

    View Slide

  31. View Slide

  32. Prepros
    Prepros compiles LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript,
    LiveScript, Haml and Markdown.
    alphapixels.com/prepros/

    View Slide

  33. Syntax
    The most important part of writing code in a CSS preprocessor is
    understanding the syntax. Luckily for us, the syntax is (or can be)
    identical to regular CSS for all three preprocessors.

    View Slide

  34. Sass (SCSS) or LESS
    Sass (SCSS) and LESS both use standard CSS syntax. This makes it
    extremely easy to convert an existing CSS file to either preprocessor.
    /
    * s
    t
    y
    l
    e
    .
    s
    c
    s
    s o
    r s
    t
    y
    l
    e
    .
    l
    e
    s
    s *
    /
    h
    1 {
    c
    o
    l
    o
    r
    : #
    0
    0
    a
    f
    e
    e
    ;
    }
    /
    * s
    t
    y
    l
    e
    .
    s
    a
    s
    s *
    /
    h
    1
    c
    o
    l
    o
    r
    : #
    0
    0
    a
    f
    e
    e

    View Slide

  35. Stylus
    Stylus accepts standard CSS syntax + other variations where brackets,
    colons, and semi-colons are all optional.
    /
    * s
    t
    y
    l
    e
    .
    s
    t
    y
    l *
    /
    d
    i
    v
    .
    m
    a
    s
    t
    h
    e
    a
    d {
    b
    a
    c
    k
    g
    r
    o
    u
    n
    d
    : #
    0
    0
    a
    f
    e
    e
    ;
    }
    /
    * o
    m
    i
    t b
    r
    a
    c
    k
    e
    t
    s *
    /
    d
    i
    v
    .
    m
    a
    s
    t
    h
    e
    a
    d
    b
    a
    c
    k
    g
    r
    o
    u
    n
    d
    : #
    0
    0
    a
    f
    e
    e
    ;
    /
    * o
    m
    i
    t c
    o
    l
    o
    n
    s a
    n
    d s
    e
    m
    i
    -
    c
    o
    l
    o
    n
    s *
    /
    d
    i
    v
    .
    m
    a
    s
    t
    h
    e
    a
    d
    b
    a
    c
    k
    g
    r
    o
    u
    n
    d #
    0
    0
    a
    f
    e
    e

    View Slide

  36. Variables
    Variables are a way to store reusable strings that you can reference
    throughout your stylesheet(s).
    Use them to store things like colors, font stacks, etc.

    View Slide

  37. SCSS
    $
    m
    a
    i
    n
    -
    c
    o
    l
    o
    r
    : #
    0
    0
    6
    ;
    c
    o
    l
    o
    r
    : $
    m
    a
    i
    n
    -
    c
    o
    l
    o
    r
    ;
    LESS
    @
    m
    a
    i
    n
    -
    c
    o
    l
    o
    r
    : #
    0
    0
    6
    ;
    c
    o
    l
    o
    r
    : @
    m
    a
    i
    n
    -
    c
    o
    l
    o
    r
    ;
    Stylus
    m
    a
    i
    n
    -
    c
    o
    l
    o
    r = #
    0
    0
    6
    c
    o
    l
    o
    r m
    a
    i
    n
    -
    c
    o
    l
    o
    r

    View Slide

  38. Mixins
    Reusable sets of properties or rules that you can include or mix into
    other rules. Define via @mixin mixin-name;and then use @include
    mixin-name; with a selector.

    View Slide

  39. SCSS Mixins
    @
    m
    i
    x
    i
    n p
    a
    d
    (
    $
    x
    , $
    y
    ) {
    p
    a
    d
    d
    i
    n
    g
    : $
    y $
    x
    ;
    }
    .
    m
    s
    g {
    @
    i
    n
    c
    l
    u
    d
    e p
    a
    d
    (
    5
    p
    x
    , 1
    0
    p
    x
    )
    ;
    }

    View Slide

  40. LESS Mixins
    .
    p
    a
    d
    (
    @
    x
    , @
    y
    ) {
    p
    a
    d
    d
    i
    n
    g
    : @
    y @
    x
    ;
    }
    .
    m
    s
    g {
    .
    p
    a
    d
    (
    5
    p
    x
    , 1
    0
    p
    x
    )
    ;
    }

    View Slide

  41. Stylus Mixins
    p
    a
    d
    (
    x
    , y
    )
    p
    a
    d
    d
    i
    n
    g y x
    .
    m
    s
    g
    p
    a
    d
    (
    5
    p
    x
    , 1
    0
    p
    x
    )

    View Slide

  42. @import
    Just like CSS, you can import additional stylesheets into a main
    document. With preprocessors, there aren't multiple HTTP request.
    Compiled CSS = 1 combined stylesheet.
    @
    i
    m
    p
    o
    r
    t "
    f
    i
    l
    e
    .
    l
    e
    s
    s
    "
    ; /
    / L
    E
    S
    S
    @
    i
    m
    p
    o
    r
    t "
    f
    i
    l
    e
    "
    ; /
    / A
    s
    s
    u
    m
    e
    s .
    s
    a
    s
    s o
    r
    .
    s
    c
    s
    s
    @
    i
    m
    p
    o
    r
    t "
    m
    i
    x
    i
    n
    s
    /
    b
    o
    r
    d
    e
    r
    -
    r
    a
    d
    i
    u
    s
    " /
    / A
    s
    s
    u
    m
    e
    s .
    s
    t
    y
    l
    @
    i
    m
    p
    o
    r
    t "
    s
    t
    y
    l
    e
    .
    c
    s
    s
    " /
    / S
    t
    y
    l
    u
    s - l
    i
    t
    e
    r
    a
    l

    View Slide

  43. And now here's the part where
    I stop talking about LESS & Stylus.

    View Slide

  44. Sass Partials
    Chunks of CSS that you are included in other Sass files.
    These don't compile directly.
    Reuse as you see fit.
    /
    / f
    i
    l
    e
    n
    a
    m
    e
    : _
    m
    e
    n
    u
    .
    s
    c
    s
    s
    @
    i
    m
    p
    o
    r
    t "
    _
    m
    e
    n
    u
    "
    ;
    /
    / O
    R
    :
    @
    i
    m
    p
    o
    r
    t "
    m
    e
    n
    u
    "
    ;
    Underscore (_) is optional with @import. Sass checks for it automatically.

    View Slide

  45. /
    / F
    i
    l
    e S
    t
    r
    u
    c
    t
    u
    r
    e
    + s
    c
    s
    s
    /
    c
    o
    r
    e
    .
    s
    c
    s
    s /
    / P
    r
    i
    m
    a
    r
    y S
    a
    s
    s f
    i
    l
    e
    @
    i
    m
    p
    o
    r
    t "
    m
    i
    x
    i
    n
    s
    "
    ; /
    / _
    m
    i
    x
    i
    n
    s
    .
    s
    c
    s
    s
    @
    i
    m
    p
    o
    r
    t "
    c
    o
    l
    o
    r
    s
    "
    ; /
    / _
    c
    o
    l
    o
    r
    s
    .
    s
    c
    s
    s
    @
    i
    m
    p
    o
    r
    t "
    t
    y
    p
    o
    g
    r
    a
    p
    h
    y
    "
    ; /
    / _
    t
    y
    p
    o
    g
    r
    a
    p
    h
    y
    .
    s
    c
    s
    s
    @
    i
    m
    p
    o
    r
    t "
    m
    a
    s
    t
    h
    e
    a
    d
    "
    ; /
    / _
    m
    a
    s
    t
    h
    e
    a
    d
    .
    s
    c
    s
    s
    @
    i
    m
    p
    o
    r
    t "
    n
    a
    v
    "
    ; /
    / _
    n
    a
    v
    .
    s
    c
    s
    s
    /
    / I
    t
    '
    d c
    o
    m
    p
    i
    l
    e t
    h
    e
    m a
    l
    l i
    n
    t
    o o
    n
    e C
    S
    S f
    i
    l
    e
    :
    + c
    s
    s
    /
    c
    o
    r
    e
    .
    c
    s
    s
    Underscore (_) is optional with @import. Sass checks for it automatically.

    View Slide

  46. Nesting
    HTML has a fairly clear nested, visual hierarchy. CSS doesn't.
    Sass lets you nest your CSS selectors in a way that follows the same
    logical structure.

    View Slide

  47. Instead of writing repetitive
    selectors...
    h
    1
    {
    f
    o
    n
    t
    -
    f
    a
    m
    i
    l
    y
    : P
    a
    p
    y
    r
    u
    s
    ;
    f
    o
    n
    t
    -
    s
    i
    z
    e
    : 1
    5
    p
    x
    ;
    }
    h
    1 a
    {
    c
    o
    l
    o
    r
    : #
    f
    f
    e
    1
    0
    0
    ;
    }

    View Slide

  48. You can nest child selectors
    within the parent.
    h
    1
    {
    f
    o
    n
    t
    {
    f
    a
    m
    i
    l
    y : P
    a
    p
    y
    r
    u
    s
    ;
    s
    i
    z
    e : 1
    5
    p
    x
    ;
    }
    a
    {
    c
    o
    l
    o
    r
    : #
    f
    f
    e
    1
    0
    0
    ;
    }
    }

    View Slide

  49. &
    The allows you to refer back to a parent
    when constructing a nested selector.

    View Slide

  50. This:
    h
    1
    {
    f
    o
    n
    t
    -
    s
    i
    z
    e
    : 2
    4
    p
    x
    ;
    &
    .
    t
    a
    g
    l
    i
    n
    e
    {
    f
    o
    n
    t
    -
    s
    i
    z
    e
    : 4
    8
    p
    x
    ;
    }
    }
    Compiles to this:
    h
    1
    { f
    o
    n
    t
    -
    s
    i
    z
    e
    : 2
    4
    p
    x
    ; }
    h
    1
    .
    t
    a
    g
    l
    i
    n
    e
    { f
    o
    n
    t
    -
    s
    i
    z
    e
    : 4
    8
    p
    x
    ; }

    View Slide

  51. Color Functions
    lighten(), darken(), rgba(), hsla()

    View Slide

  52. l
    i
    g
    h
    t
    e
    n
    (
    $
    c
    o
    l
    o
    r
    ,
    $
    a
    m
    o
    u
    n
    t
    )
    d
    a
    r
    k
    e
    n
    (
    $
    c
    o
    l
    o
    r
    ,
    $
    a
    m
    o
    u
    n
    t
    )
    r
    g
    b
    a
    (
    $
    c
    o
    l
    o
    r
    ,
    $
    o
    p
    a
    c
    i
    t
    y
    )
    h
    s
    l
    a
    (
    $
    c
    o
    l
    o
    r
    ,
    $
    o
    p
    a
    c
    i
    t
    y
    )

    View Slide

  53. $
    a
    w
    d
    g
    R
    e
    d
    : #
    d
    e
    3
    8
    3
    1
    ;
    a
    .
    l
    o
    g
    o
    {
    b
    a
    c
    k
    g
    r
    o
    u
    n
    d
    : $
    a
    w
    d
    g
    R
    e
    d
    ;
    &
    :
    h
    o
    v
    e
    r
    {
    b
    a
    c
    k
    g
    r
    o
    u
    n
    d
    : d
    a
    r
    k
    e
    n
    (
    $
    a
    w
    d
    g
    R
    e
    d
    ,
    2
    5
    )
    ;
    }
    &
    :
    a
    c
    t
    i
    v
    e
    {
    b
    a
    c
    k
    g
    r
    o
    u
    n
    d
    : r
    g
    b
    a
    (
    $
    a
    w
    d
    g
    R
    e
    d
    ,
    .
    7
    5
    )
    ;
    }
    }
    This compiles to: → colors.css

    View Slide

  54. Nested Media
    Queries
    Allow you to keep media queries within their original context.

    View Slide

  55. Nested Media Query
    Here, we can change the <
    h
    1
    > font-size based on viewport max-width.
    h
    1
    {
    f
    o
    n
    t
    -
    s
    i
    z
    e
    : 4
    e
    m
    ;
    @
    m
    e
    d
    i
    a s
    c
    r
    e
    e
    n a
    n
    d (
    m
    a
    x
    -
    w
    i
    d
    t
    h
    :
    4
    8
    0
    p
    x
    )
    {
    f
    o
    n
    t
    -
    s
    i
    z
    e
    : 2
    e
    m
    ;
    }
    @
    m
    e
    d
    i
    a s
    c
    r
    e
    e
    n a
    n
    d (
    m
    a
    x
    -
    w
    i
    d
    t
    h
    :
    3
    2
    0
    p
    x
    )
    {
    c
    o
    l
    o
    r
    : #
    c
    0
    0
    ;
    f
    o
    n
    t
    -
    s
    i
    z
    e
    : 1
    .
    5
    e
    m
    ;
    }
    }

    View Slide

  56. But what if you want to change your breakpoints?
    Conditional MQ Mixin
    @
    m
    i
    x
    i
    n b
    p
    (
    $
    p
    o
    i
    n
    t
    ) {
    @
    i
    f $
    p
    o
    i
    n
    t =
    = p
    a
    p
    a
    -
    b
    e
    a
    r {
    @
    m
    e
    d
    i
    a (
    m
    a
    x
    -
    w
    i
    d
    t
    h
    : 1
    6
    0
    0
    p
    x
    ) { @
    c
    o
    n
    t
    e
    n
    t
    ; }
    }
    @
    e
    l
    s
    e i
    f $
    p
    o
    i
    n
    t =
    = m
    a
    m
    a
    -
    b
    e
    a
    r {
    @
    m
    e
    d
    i
    a (
    m
    a
    x
    -
    w
    i
    d
    t
    h
    : 1
    2
    5
    0
    p
    x
    ) { @
    c
    o
    n
    t
    e
    n
    t
    ; }
    }
    @
    e
    l
    s
    e i
    f $
    p
    o
    i
    n
    t =
    = b
    a
    b
    y
    -
    b
    e
    a
    r {
    @
    m
    e
    d
    i
    a (
    m
    a
    x
    -
    w
    i
    d
    t
    h
    : 6
    0
    0
    p
    x
    ) { @
    c
    o
    n
    t
    e
    n
    t
    ; }
    }
    }

    View Slide

  57. How you'd use it
    h
    1
    {
    f
    o
    n
    t
    -
    s
    i
    z
    e
    : 4
    e
    m
    ;
    @
    i
    n
    c
    l
    u
    d
    e b
    p
    (
    m
    a
    m
    a
    -
    b
    e
    a
    r
    )
    {
    f
    o
    n
    t
    -
    s
    i
    z
    e
    : 2
    e
    m
    ;
    }
    @
    i
    n
    c
    l
    u
    d
    e b
    p
    (
    b
    a
    b
    y
    -
    b
    e
    a
    r
    )
    {
    c
    o
    l
    o
    r
    : #
    c
    0
    0
    ;
    f
    o
    n
    t
    -
    s
    i
    z
    e
    : 1
    .
    5
    e
    m
    ;
    }
    }
    CSS Tricks - Conditional Media Query Mixins - hrrsn.me/Tlub

    View Slide

  58. Operators
    Sass has a handful of standard math operators like +, -, *, /, and %.

    View Slide

  59. Sass Operators
    Here, we can calculate the width of the sidebar based on the width and
    columns.
    /
    / S
    C
    S
    S
    $
    w
    i
    d
    t
    h
    : 9
    6
    0
    p
    x
    ;
    $
    c
    o
    l
    : 6
    ;
    #
    s
    i
    d
    e
    b
    a
    r
    {
    w
    i
    d
    t
    h
    : (
    $
    w
    i
    d
    t
    h
    /
    $
    c
    o
    l
    )
    ;
    }
    /
    / B
    E
    C
    O
    M
    E
    S
    #
    s
    i
    d
    e
    b
    a
    r
    { w
    i
    d
    t
    h
    :
    1
    6
    0
    p
    x
    ; }

    View Slide

  60. %foo & @extend
    Placeholder selectors look just like class or id's but they're used with
    @extend. Used on their own, they aren't compiled into your CSS.

    View Slide

  61. %
    c
    l
    e
    a
    r
    f
    i
    x
    {
    z
    o
    o
    m
    :
    1
    ;
    &
    :
    b
    e
    f
    o
    r
    e
    ,
    &
    :
    a
    f
    t
    e
    r {
    c
    o
    n
    t
    e
    n
    t
    : "
    \
    0
    0
    2
    0
    "
    ;
    d
    i
    s
    p
    l
    a
    y
    : b
    l
    o
    c
    k
    ;
    h
    e
    i
    g
    h
    t
    : 0
    ;
    o
    v
    e
    r
    f
    l
    o
    w
    : h
    i
    d
    d
    e
    n
    ;
    }
    &
    :
    a
    f
    t
    e
    r { c
    l
    e
    a
    r
    : b
    o
    t
    h
    ; }
    }
    h
    e
    a
    d
    e
    r
    { @
    e
    x
    t
    e
    n
    d %
    c
    l
    e
    a
    r
    f
    i
    x
    ; }

    View Slide

  62. /
    / O
    r y
    o
    u c
    a
    n e
    x
    t
    e
    n
    d o
    t
    h
    e
    r s
    e
    l
    e
    c
    t
    o
    r
    s
    .
    e
    r
    r
    o
    r {
    b
    o
    r
    d
    e
    r
    : 1
    p
    x #
    f
    0
    0
    ;
    b
    a
    c
    k
    g
    r
    o
    u
    n
    d
    -
    c
    o
    l
    o
    r
    : #
    f
    d
    d
    ;
    }
    .
    s
    e
    r
    i
    o
    u
    s
    E
    r
    r
    o
    r {
    @
    e
    x
    t
    e
    n
    d .
    e
    r
    r
    o
    r
    ;
    b
    o
    r
    d
    e
    r
    -
    w
    i
    d
    t
    h
    : 3
    p
    x
    ;
    }
    placeholder.css

    View Slide

  63. Demo Time

    View Slide

  64. Frameworks & Libraries
    Bootstrap, Foundation, Compass, Bourbon & More...
    hrrsn.me/RzyE

    View Slide

  65. Even Moar Reading
    A collection of links on CSS Preprocessors, online tools, and more.
    hrrsn.me/Rzwm

    View Slide

  66. You got this.

    View Slide

  67. Stay in Touch
    Web:
    Email:
    Twitter: @
    cdharrison.com
    [email protected]
    cdharrison

    View Slide

  68. Thank you.

    View Slide