#268 Sass Basics

May 30, 2011 | 13 minutes | Rails 3.1

Sass extends CSS with variables, nesting, mixins and more. Here I show how to convert plain CSS to SCSS in a Rails 3.1 app.

Click to Play Video ▶

Download:
source codeProject Files in Zip (80.5 KB)
mp4Full Size H.264 Video (27.7 MB)
m4vSmaller H.264 Video (15 MB)
webmFull Size VP8 Video (16.5 MB)
ogvFull Size Theora Video (38 MB)

gaeldeest over 13 years ago

Hi Ryan,

Nice screencast, as always. I can't say I learned much, as I've been using SASS for years now, but it's nice to have some user-friendly reference to point Rails newbies to.

What I really wanted to know though, is this: how do you set the SASS import path in Rails 3.1 ? Been trying for days, nothing seems to work.

Do you happen to know if this is possible at all ?

Thanks again

Ryan Bates over 13 years ago

Good question. The import path seems to be the app/assets/stylesheets directory, but I don't know how to change it in 3.1. Maybe someone else will be able to enlighten us.

Grzesiek Kolodziejczyk over 13 years ago

I do it like this: https://gist.github.com/998563

gaeldeest over 13 years ago

Putting this in an initializer:

          ruby
        
require 'sass'
require 'sass/plugin'

Sass::Engine::DEFAULT_OPTIONS[:load_paths].tap do |load_paths|
    load_paths << "#{Rails.root}/my/import/path"
end

is supposed to work, according to many comments found on the net. Yet it doesn't - I still get an error when trying to import some external stylesheet, which incidentally outputs the SASS path, which is, indeed, app/assets/stylesheets.

I converted some Rails 3.0 application to 3.1 ; it might explain why this solution doesn't work for me.

I find it unfortunate that the Rails guys didn't think this out more thoroughly. Or may be they did, in which case I'm eagerly waiting for some detailed documentation ;)

Jaimie van Santen over 13 years ago

Hey Ryan,

Thanks a lot for the episode. Do you know how to use Compass in Rails 3.1? Since the regular usage is relying on the older public/stylesheets directory i cant figure how to configure it to work with the newer 3.1 and the 960 Compass plugin.

Thanks anyway!

Erik Dahlstrand over 13 years ago

Use Compass Sass Framework Files With The Rails 3.1 Asset Pipeline

Stephan van Eijkelenburg over 13 years ago

They are working on it, so I guess it won't take long before the default setup will work.

It's the most commented issue on the compass github-tracker, people really seem to want it :)

Juergen Helmers over 13 years ago

Thanks for the railscasts!

It is great to see SASS being more integrated into rails 3.1. We have been using sass for all our projects for over a year now. The variables and mixins are such a time saver and clean up the resulting CSS code considerably. We prefer to use compass and sass files though as compass gives up great automated mixins and SASS is as nice as HAML is for views. But that is personal preference I guess...

Johannes Barre over 13 years ago

Nice screencast, as always. Hope you tell us about the image referencing gotcha in a later episode. If you reference your images from css without erb, it'll break in production. See

https://github.com/rails/rails/issues/1209

Geoff Garside over 13 years ago

Very nice screencast, I like the suggestion of using SCSS to handle the importing of additional SCSS files. Its worth noting though that Sprockets won't detect changes to the dependent stylesheets when you're using @import so you will probably want to add

*= depends_on "projects"

to your application.css.scss so that changes to that file will rebuild the application.css file. Hopefully once things have landed properly an SCSS @import will handle this.

Matthew over 13 years ago

Cheers, almost imploded my f5 key over this bug...

Yury Korolev over 13 years ago

          ruby
        
*= depend_on "projects"

without s

weblee over 13 years ago

HAHA I was like Matthew until I came back here and read this thread TY Geoff.

On another small note I have different backend/frontend folders for my style sheets so I had to do.

          ruby
        
*= depend_on "backend/projects"

Balazs Nagy over 13 years ago

I'm thinking on a viable solution for this since David's starting keynote. This =depend_on is a good idea, but having two separate lists (one for @import and another for depend_on) is not.

However, we can do it in a different way.

We can put any variable declarations, mixins, functions to a separate file we can depend on, then we can @import them in every single .scss file, and then we can use =require_tree . in application.css.

Rules of thumb:

As Ryan mentioned, .scss files get rendered separately, therefore separating declarations from actual @includes doesn't work in sprockets natively.
We can @import declarations to every single .scss file.
However, while =require'd files can come either from app/assets, lib/assets, and vendor/assets, @import doesn't know the trick. It doesn't even know about Sprocket's require magic (using wildcards, requiring trees, maintaining depends).
=require_tree load sequence is defined by the operating system, therefore we can't rely on it.
However, =require and =require_tree doesn't load files which are already imported. Therefore use specific =requires for files where ordering is important, and let =require_tree . to do the dirty work.

It looks like we'll have at least a plugin to handle this situation, which might be migrated to sprockets eventually, but for the time being we don't have anything similar.

Alexei Danchenkov over 13 years ago

Thanks, Geoff. I was exhausted trying to figure things out.

Philip Vieira over 13 years ago

Great screencast Ryan,

I've been having a bit of a struggle with import order using the default (css comments).
This way i can now easily pass on home made mixins and variables where they are needed.

Thanks!

David Backeus over 13 years ago

I've been adhering to the "Object Oriented CSS" pattern when writing CSS lately. One of the guiding principles in that is that you never style anything based on its container. Another principle is never style anything based on ids (ids can be used for javascript logic but for styling you use classes for reusability etc).

In effect the example you give of styling based on an id in body is pretty much the most extreme way of breaking the pattern (one thing I've noticed out of experience is that the "further away" the container definition is the more complicated it becomes to make sense of the css logic).

Theres a good video outlining some of the reasons (basically CSS anti patterns) behind OOCSS here:
http://www.youtube.com/watch?v=j6sAm7CLoCQ

Rob Zolkos over 13 years ago

Is using the method @ryanb uses in body better than just calling controller_name ?

Robert L. Carpenter over 13 years ago

Hey Ryan! Great job with your videos. I'm helping a friend learn rails and your stuff has been excellent for some of the more advanced topics. Thanks!

uchenna over 13 years ago

i have a problem any time i refresh my browser it does not render my stylesheet unless i refresh again and my server log says undefined method >= does any one no how to fix this. im using a windows machine for my rails 3.1 app

Eric Berry over 13 years ago

Hey Ryan,

It always amazes me on how every screen cast that you create always has a bit more info and expertise than expected. I love how you shared the way to do controller specific styles and also the text mate color picker.

Rails wouldn't be the same without you!

Nate Bird over 13 years ago

With an existing application it was useful to automate some of the heavy lifting converting stylesheets to scss. Here is a blog post I found which provides the command line tool sass-convert syntax.

danielavdh over 13 years ago

Been waiting for this for years. Absolutely fantastic!!! Am so pleased. Watched the 3.1 beta as well and wow!! same thing. So useful :):)

Matthew Higgins over 13 years ago

Hmm, I think I would do this instead of the imports:

/*
*require layout
*require projects
*/

Reasons: The files get recompiled on refresh and you don't need to specify the extension.

Chuck Vose over 13 years ago

Thanks for the Railscast, the bits around 9:00 about debugging and the sprockets tweaks were really handy to know about.

Baylor Rae' over 13 years ago

Great screencast I can't wait start using Sass in upcoming projects. Just a quick note though, I noticed you put the non vendor prefix at the beginning of your border-radius mixin. It's recommended to put the non vendor prefix at the end. Here's an article explaining what I mean.

Paul Gisbourne over 13 years ago

Hi Ryan,

You said in the video that you would put a link in the show notes to show how you got the colour wheel working with the sass bundle, unless I'm mistaken I can't see it. Any chance you could let us know how to get it to work?

Many thanks, love the screencasts.

demetrios over 13 years ago

I second this request.

demetrios over 13 years ago

Figured it out...go into TextMate's Bundle Editor (???B). Click triangle to expand "CSS" in list on left. Select "Insert Color..." and add "source.scss, " to the Scope Selector field. So Scope Selector now reads: "source.css, source.scss, meta.tag string.quoted -source". Then Bundles>Bundle Editor>Reload Bundles. ??C will now bring up color picker in SCSS files as it did in CSS files before.

Paul Gisbourne over 13 years ago

brilliant thanks demetrios, I'm not fluent enough with textmate to know where to start looking for these things

Ken Hart over 13 years ago

Does anyone have any good suggestions on how to use this if your html/css coder doesn't use rails? Before, we just created a folder in "public" called "mockups", which would use the same stylesheets, images, and javascripts as the app. But now, with this asset pipeline, I have to figure out a way to keep our streamlined integration. How do some of you handle this?

Juergen Helmers over 13 years ago

Hi Ken,
you could use the above mentioned compass for that. Compass nicely integrates with rails but you can use it without it as well. You will need to run a watch process from the terminal though to monitor changes to your sass/scss files that then get compiled into css-stylesheets on the fly. Find out more about it here:
http://compass-style.org/install

Cheers J.

Brent Jubinville over 13 years ago

Another great screencast Ryan, thanks.

Wanted to mention that vendor-prefixed properties should always go before non-prefixed properties in css, otherwise some weirdness can occur. (e.g. put -webkit-border-radius above border-radius).

first-developer over 13 years ago

Please who can i specify the path for scss files and the related css path for the compiled file ? in rails 3.0.7
How can use sass manualy to generate css files when i was in for exemple in Appcontroller ? which steps should i have to follow to do this with sass (Rails 3.0.7)

Thanks a lot :)

Matthew over 13 years ago

I've recently found *= depend_on "users" no longer works. Appending the file extension seems to get it working again :)

Sorry if someone has already posted this.

Louis de Valliere over 13 years ago

Hey Ryan, quick question, how do you get your project folder to be part of the textmate window rather than the usual drawer style (like this; http://blogallalong.com/wp-content/uploads/2009/04/textmate-project-drawer.png) ?

Thanks for the all superb videos over the years! :)

Sairam about 13 years ago

You could find it at https://github.com/jezdez/textmate-missingdrawer which in the show notes in episode 265

NGUYEN Chien Cong about 13 years ago

Hi Ryan,

Great cast!
I have a question for you: with 3.1stable coming, do you think that the trick of using an id for a specific controller will be necessary anymore?

thanks and cheers

Demizide about 13 years ago

"appication.css.scss" should be "application.css.scss" in the shownotes

Mark Kremer about 13 years ago

It has been corrected :)

texrus over 12 years ago

I am using Sublime Text 2 beta (because I use Ubuntu). Any ideas if Sublime Text 2 has a color wheel / palette like Ryan got to work in Textmate?

Also, I was kind of looking for some help on configuring and browsing though a list of snippets that Ryan uses for Textmate. Anyone know anything about that? I'm a bit tired of typing <%= %> and I'm not sure I want to switch to haml.

Thanks

yuvilio over 12 years ago

I use ColorPicker in Sublime Text 2. It's available in Package control for an easy install. I click on the color and hit Ctrl+Shift+C to bring up the color picker, and when I hit ok, it types out the color chosen.

Jianbin Ray about 11 years ago

Works good for me. Good package, thank you for sharing

Kallikanzarid over 12 years ago

I think creating a file like _globals.css.scss and importing it into your SASS files is more flexible than just importing them all manually in application.css.scss.

Richard almost 12 years ago

Outstanding overview of SASS. And thanks for the color wheel popup tip in TextMate; I didn't even know about that!

Jianbin Ray about 11 years ago

          ruby
        
really nice broadcast

Johannes Lüdke over 9 years ago

The video file seems to be broken (404 http://media.railscasts.com/assets/episodes/videos/268-sass-basics.mp4)

Johannes Lüdke over 9 years ago

works again now