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

Sass: The Future of Stylesheets (In Rails 3.1)

723ee972f9e5078aeda85cdf0db3f3c8?s=47 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

723ee972f9e5078aeda85cdf0db3f3c8?s=128

Chris Eppstein

September 26, 2011
Tweet

Transcript

  1. The Future of Stylesheets

  2. The Future of Stylesheets In Rails

  3. http://chriseppstein.github.com

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

    blah blah blah. CSS blah blah blah.
  5. None
  6. None
  7. (before advance) So why am I here?

  8. 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.
  9. 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.
  10. I HATE CSS I don’t have any way to create

    DRY!
  11. 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!
  12. I HATE CSS I don’t have any way to create

    DRY!
  13. I HATE CSS It’s not even good at design But

    CSS selectors are a great query language
  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.
  15. 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.
  16. 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.
  17. 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...
  18. Crazy Guy Amazing Partner Everything turned out better than expected!

    Sometimes a crazy guy get’s lucky.
  19. 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.
  20. Rails 3.1: Asset Pipeline

  21. 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
  22. Transform, Rename & Generate Static assets aren’t so simple afterall.

  23. <Rails.root>/app/assets <Rails.root>/public/assets

  24. 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.
  25. 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.
  26. 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.
  27. 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.
  28. 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.
  29. 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.
  30. 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.
  31. application.css.erb Yuck!

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

  33. 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.
  34. Setting up a new project rails new <my_project> Not Sassy!

  35. INCLUDES SASS BY DEFAULT INCLUDES SASS BY DEFAULT MAKES CSS

    IN NEW APPS MAKES CSS IN NEW APPS scumbag dhh picture.
  36. application.css application.css.scss rename change

  37. 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.
  38. • 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.
  39. 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.
  40. The :assets Group Only enabled in development & test environments.

    Because you should precompile your assets. In development your assets are compiled on the fly.
  41. Capfile load 'deploy/assets' Add this to your Capfile and it

    will run rake assets:precompile for you.
  42. What was the point, again? ✓Better Syntax ✓Caching There was

    something else.
  43. Sprites are a pain in the ass! At least my

    hair looks good.
  44. Demo Time!

  45. 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!
  46. 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