#330 Better Sass with Bourbon

Mar 07, 2012 | 7 minutes | Views, Plugins

If you are tired of the browser vendor prefixes in CSS, check out Bourbon. It provides Sass mixins and functions to make CSS more convenient.

Click to Play Video ▶

Download:
source codeProject Files in Zip (96 KB)
mp4Full Size H.264 Video (20.6 MB)
m4vSmaller H.264 Video (9.38 MB)
webmFull Size VP8 Video (10.9 MB)
ogvFull Size Theora Video (21.8 MB)

murdoch over 12 years ago

been using this for a while myself, along with flutie, also by thoughtbot

Dominik Menke over 12 years ago

I'd really like to see a COMPASS introduction, too. In particular I'm having trouble to setup image sprites...

Janusz Pietrzyk over 12 years ago

Pedro Del Gallego over 12 years ago

Bettina Steger over 12 years ago

Sindre Moen over 12 years ago

joeytheman over 12 years ago

What does your sprite folder structure look like?

Dominik Menke over 12 years ago

With #334, I figured out, that I have used the »compass« and not the »compass-rails« gem...

So far, the @import 'icons/*.png' had always failed... Now I know better ;-)

Neons about 12 years ago

FYI, I just wrote about my experience with Compass and CSS Sprites. Check it out here.

Radha over 12 years ago

I'm confuse, is this like compass?

Johannes Barre over 12 years ago

Small hint: It's not really necessary to use browser prefixes for border-radius anymore, since in January 2010 (Chrome 4), in June 2010 (Safari 5) and March 2011 (Firefox 4) the prefix was dropped. Opera and Internet Explorer never provided a prefixed form. Could save you some bytes in your CSS.

You also might want to use -prefix-free.js, a 2K lib which let you use the unprefixed stylesheets and rewrite them as necessary. http://leaverou.github.com/prefixfree/

Matthew Burket over 12 years ago

Well this is support for people who don't update their browsers.

Matthew Burket over 12 years ago

I am having an odd issue in Develoment: In order to make Sass stop throwing expections about 'Undefined mixin' I have to use @import "bourbon"; on EACH stylesheet. What would be causing this?

Using Rails 3.1.

Istvan Pusztai over 12 years ago

I'm seeing this with the Compass gem as well. I think it's a sprockets limitation.

Sindre Moen over 12 years ago

See my answer to Matthew above. You're better off not using Sprockets to gather your SCSS files.

Sindre Moen over 12 years ago

Make sure you are not using Sprockets in your application stylesheet file. As Ryan mentions at the beginning of this episode, Sprockets will compile each of the SCSS files individually, and you will therefore not have access to the bourbon.css.scss in your SCSS files (unless explicitly imported). I see no reason to use Sprockets for your sCSS files – other than the (rather flawed, in my opinion) require-tree functionality, so it's generally better to rename the application.css file to application.css.scss and use SCSS @import instead. Watch the beginning of this screencast once more to see how Ryan does it.

John dowd over 12 years ago

Sindre, I followed Ryan's advice: renamed app.css to app.css.scss, @import'ed bourbon and all other .css.scss files, and stripped out the Sprockets stuff from app.css.

All works great in Dev. When I deploy (to heroku cedar) I get an 'unrecognized mixin' in any file that calls a mixin other than app.css.scss (where I have the @import bourbon line). The only thing that solves it is doing another @import bourbon in every files that calls a mix-in. Why do i have to duplicate that import call?

Sindre Moen over 12 years ago

Hello John. Sorry for the late reply, didn't notice your question until now. If it's still a problem, make sure you're actually installing the gem on Heroku. By default, Heroku does not install gems from the assets group in your Gemfile, as they're considered only for development and test. So, if your gem is in the assets group, try moving it out of there and see if the problem persists.

Good luck. :-)

Michael Solovyov over 12 years ago

To fix this, make sure that in your application.css.scss you delete any '.css'.

kgen over 12 years ago

Compared to Compass, which one is better?

Andrew Greenberg over 12 years ago

And if you decide to use Twitter Benchmark, it includes a number of mixing similar to those found in Bourbon.

Sindre Moen over 12 years ago

I think you mean Twitter Bootstrap. And you are corrent, it does provide several mixins to use and variables to manipulate. :-)

Bettina Steger over 12 years ago

I've only used Compass and doesn't see any difference..
which one is better?

Sindre Moen over 12 years ago

Great screencast! I've also been using Compass before and would love to see a screencast about this soon.

For those who have asked: Compass is quite a lot more extensive than Bourbon and offers more functionality (such as sticky footers and image spriting). However, I think Bourbon is much easier to get started with and use, and for those projects that doesn't need the largeness of Compass, I believe Bourbon might just be the right thing to use.

Also check out Twitter Bootstrap, which Ryan covered on a recent episode. While Bootstrap gives you a lot more than just mixins and variables for your SCSS files, they provide you with a number of these as well.

garethpatterson almost 12 years ago

Ahhh.. just found why the border-radius error is still there... it is because this include has been removed from bourbon. http://bourbon.io/docs/#border-radius

Make a minor change in projects.css.scss to replace the border-radius line with the following four lines:

@include border-top-radius(6px);
@include border-bottom-radius(6px);
@include border-left-radius(6px);
@include border-right-radius(6px);

Olli over 11 years ago

Thank you man - you saved me another day of searching :)

Paul Morganthall over 10 years ago

I read the GitHub issue comment about the deprecation of the border-radius mixin. With Bourbon 3.0 you should use the standard CSS border-radius: 6px;.