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.
Slide 9
Slide 9 text
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.
Slide 10
Slide 10 text
I HATE CSS
I don’t have any way to create DRY!
Slide 11
Slide 11 text
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!
Slide 12
Slide 12 text
I HATE CSS
I don’t have any way to create DRY!
Slide 13
Slide 13 text
I HATE CSS
It’s not even good at design
But CSS selectors are a great query language
Slide 14
Slide 14 text
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.
Slide 15
Slide 15 text
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.
Slide 16
Slide 16 text
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.
Slide 17
Slide 17 text
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...
Slide 18
Slide 18 text
Crazy Guy
Amazing Partner
Everything turned out better than expected!
Sometimes a crazy guy get’s lucky.
Slide 19
Slide 19 text
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.
Slide 20
Slide 20 text
Rails 3.1:
Asset Pipeline
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
Transform, Rename &
Generate
Static assets aren’t so simple afterall.
Slide 23
Slide 23 text
/app/assets
/public/assets
Slide 24
Slide 24 text
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.
Slide 25
Slide 25 text
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.
Slide 26
Slide 26 text
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.
Slide 27
Slide 27 text
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.
Slide 28
Slide 28 text
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.
Slide 29
Slide 29 text
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.
Slide 30
Slide 30 text
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.
Slide 31
Slide 31 text
application.css.erb
Yuck!
Slide 32
Slide 32 text
application.css.scss
YAY! Syntax Aware Parsers!
Don’t use ERB
Slide 33
Slide 33 text
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.
Slide 34
Slide 34 text
Setting up a
new project
rails new
Not Sassy!
Slide 35
Slide 35 text
INCLUDES SASS BY DEFAULT
INCLUDES SASS BY DEFAULT
MAKES CSS IN NEW APPS
MAKES CSS IN NEW APPS
scumbag dhh picture.
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.
Slide 38
Slide 38 text
• 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.
Slide 39
Slide 39 text
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.
Slide 40
Slide 40 text
The :assets Group
Only enabled in
development & test
environments.
Because you should precompile your assets.
In development your assets are compiled on the fly.
Slide 41
Slide 41 text
Capfile
load 'deploy/assets'
Add this to your Capfile and it will run rake assets:precompile for you.
Slide 42
Slide 42 text
What was the point, again?
✓Better Syntax
✓Caching
There was something else.
Slide 43
Slide 43 text
Sprites are a pain
in the ass!
At least my hair looks good.
Slide 44
Slide 44 text
Demo Time!
Slide 45
Slide 45 text
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!
Slide 46
Slide 46 text
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