Sass: The Future of Stylesheets (In Rails 3.1)

An overview of how to use Sass correctly in Rails 3.1

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.
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