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

Sass: The Future of Stylesheets (In Rails 3.1)

Chris Eppstein
September 26, 2011

Sass: The Future of Stylesheets (In Rails 3.1)

An overview of how to use Sass correctly in Rails 3.1

Chris Eppstein

September 26, 2011
Tweet

More Decks by Chris Eppstein

Other Decks in Programming

Transcript

  1. The Future of Stylesheets

    View full-size slide

  2. The Future of Stylesheets
    In Rails

    View full-size slide

  3. http://chriseppstein.github.com

    View full-size slide

  4. @chriseppstein
    Sass
    blah blah blah.
    Compass
    blah blah blah.
    Ruby
    blah blah blah.
    CSS
    blah blah blah.

    View full-size slide

  5. (before advance) So why am I here?

    View full-size slide

  6. I — Ruby on Rails
    But why does it stop at HTML?
    Don’t say “RJS” or I will have to facepunch you.
    Rails is Batteries included... Until you get to design.

    View full-size slide

  7. I — Ruby on Rails
    But why does it stop at HTML?
    DID
    Don’t say “RJS” or I will have to facepunch you.
    Rails is Batteries included... Until you get to design.

    View full-size slide

  8. I HATE CSS
    I don’t have any way to create DRY!

    View full-size slide

  9. I HATE CSS
    O
    N
    S
    I
    S
    T
    E
    N
    T
    L
    Y
    H
    I
    T
    T
    Y
    T
    Y
    L
    E
    S
    H
    E
    E
    T
    S
    I don’t have any way to create DRY!

    View full-size slide

  10. I HATE CSS
    I don’t have any way to create DRY!

    View full-size slide

  11. I HATE CSS
    It’s not even good at design
    But CSS selectors are a great query language

    View full-size slide

  12. I — Sass
    That right. It’s an acronym and it’s not capitalized. DEAL WITH IT.
    I started using Sass at 2.0. Compare to today it was primitive. But it blew my mind.

    View full-size slide

  13. I — Sass
    Y
    N
    T
    A
    C
    T
    I
    C
    A
    L
    L
    Y
    W
    E
    S
    O
    M
    E
    T
    Y
    L
    E
    S
    H
    E
    E
    T
    S
    That right. It’s an acronym and it’s not capitalized. DEAL WITH IT.
    I started using Sass at 2.0. Compare to today it was primitive. But it blew my mind.

    View full-size slide

  14. I — Sass
    That right. It’s an acronym and it’s not capitalized. DEAL WITH IT.
    I started using Sass at 2.0. Compare to today it was primitive. But it blew my mind.

    View full-size slide

  15. I — Compass
    Standard Library for Design
    Like rails, it’s a batteries included framework for stylesheets. Beyond rails integration it
    provides a Sass environment for non-rubyists.
    Biased? Yes. But it’s ok to love the things you’ve made? Especially if you get a lot of help...

    View full-size slide

  16. Crazy Guy
    Amazing Partner
    Everything turned out better than expected!
    Sometimes a crazy guy get’s lucky.

    View full-size slide

  17. Sass Syntax
    We’re not talking about that!
    Sass gives us: Variables, Calculations, Mixins, Selector Inheritance, Server-side includes,
    compression, optional white-space aware syntax. It all compiles to standard CSS.

    View full-size slide

  18. Rails 3.1:
    Asset Pipeline

    View full-size slide

  19. Assets go in. Assets come out.
    You can’t explain that!
    I’m going to try. But here’s the thing: the asset pipeline is what I would consider an “MVP”
    It’s still got a lot of growing up to do and we should all help because the vision is a beautiful
    thing. File bugs. make feature requests, build plugins

    View full-size slide

  20. Transform, Rename &
    Generate
    Static assets aren’t so simple afterall.

    View full-size slide

  21. /app/assets
    /public/assets

    View full-size slide

  22. Cache-Friendly URLs
    Zero server configuration
    background-image: url(/images/logo.png?12345678);
    The cache buster query parameter is sucks:
    reverse proxy/cdn issues,
    changes across deploys,
    (advance) generally not a well behaved resource.

    View full-size slide

  23. Fucking Resources!
    How do they work?!
    rails knows how resources work -- it has a world class routing system to enable it.
    The asset pipeline turns assets into well behaved resources.

    View full-size slide

  24. rake assets:precompile
    Part of your deploy
    asset types are merged
    digest is added to assets
    caches are happy
    personal opinion: this is too many hash digits (8 should suffice)
    gzip files are made. Some webserver configuration is needed.

    View full-size slide

  25. rake assets:precompile
    minimized
    Part of your deploy
    asset types are merged
    digest is added to assets
    caches are happy
    personal opinion: this is too many hash digits (8 should suffice)
    gzip files are made. Some webserver configuration is needed.

    View full-size slide

  26. rake assets:precompile
    minimized
    compressed
    Part of your deploy
    asset types are merged
    digest is added to assets
    caches are happy
    personal opinion: this is too many hash digits (8 should suffice)
    gzip files are made. Some webserver configuration is needed.

    View full-size slide

  27. rake assets:precompile
    minimized
    compressed
    If you have more files to precompile
    Part of your deploy
    asset types are merged
    digest is added to assets
    caches are happy
    personal opinion: this is too many hash digits (8 should suffice)
    gzip files are made. Some webserver configuration is needed.

    View full-size slide

  28. Digests are AWESOME!
    Actually... their a pain in the ass.
    (If you use CSS)
    aka fingerprints
    The asset pipeline is not magic. URL helpers like image_url are NOT optional anymore -- even
    in your stylesheets.

    View full-size slide

  29. application.css.erb
    Yuck!

    View full-size slide

  30. application.css.scss
    YAY! Syntax Aware Parsers!
    Don’t use ERB

    View full-size slide

  31. application.css.scss.erb.omg.wtf
    Chaining processors
    right to left
    You shouldn’t need to do this with SCSS. I’ve yet to see a valid use case. But if you ever think
    you need to do this, please tell me so I can consider new features.

    View full-size slide

  32. Setting up a
    new project
    rails new
    Not Sassy!

    View full-size slide

  33. INCLUDES SASS BY DEFAULT
    INCLUDES SASS BY DEFAULT
    MAKES CSS IN NEW APPS
    MAKES CSS IN NEW APPS
    scumbag dhh picture.

    View full-size slide

  34. application.css
    application.css.scss
    rename
    change

    View full-size slide

  35. Sprockets
    Vs.
    Sass
    TL;DR Don’t use sprockets directives.
    require inserts content after processing it. so you won’t be able to access any of the mixins,
    variables defined in the imported file.

    View full-size slide

  36. • require_self - required files are placed at the top of the
    file. This inverts that order.
    • require - find, process a file, & inline the output
    • require_tree - require all files in a folder (recursively)
    • depend_on - invalidate this file if the dependency changes
    Sprockets Directives
    Mixins & Variables will be not available.

    View full-size slide

  37. Omit the Extension
    Sass Directive
    Any Ruby Glob
    Glob imports are always relative to the current file.
    First looks relative to the current file, then searches the asset path.
    filename can begin with an underscore to denote a partial.
    require_self is not needed. @imports happen where they appear.
    Mixins & Variables from imported files will be available.

    View full-size slide

  38. The :assets Group
    Only enabled in
    development & test
    environments.
    Because you should precompile your assets.
    In development your assets are compiled on the fly.

    View full-size slide

  39. Capfile
    load 'deploy/assets'
    Add this to your Capfile and it will run rake assets:precompile for you.

    View full-size slide

  40. What was the point, again?
    ✓Better Syntax
    ✓Caching
    There was something else.

    View full-size slide

  41. Sprites are a pain
    in the ass!
    At least my hair looks good.

    View full-size slide

  42. More Information
    • http://guides.rubyonrails.org/asset_pipeline.html
    • http://github.com/rails/sass-rails
    • http://compass-style.org/
    • http://sass-lang.com/
    Thanks
    Ryan Bigg
    & Richard Hulse!

    View full-size slide

  43. If you use Compass and it makes your life better, please help
    make someone else’s life better by making a tax-deductible
    donation to the United Mitochondrial Disease Foundation.
    http://umdf.org/compass
    Compass is Charityware

    View full-size slide