#330 Better Sass with Bourbon
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.
- 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)
been using this for a while myself, along with flutie, also by thoughtbot
I'd really like to see a COMPASS introduction, too. In particular I'm having trouble to setup image sprites...
What does your sprite folder structure look like?
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 ;-)
FYI, I just wrote about my experience with Compass and CSS Sprites. Check it out here.
I'm confuse, is this like compass?
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/
Well this is support for people who don't update their browsers.
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.
I'm seeing this with the Compass gem as well. I think it's a sprockets limitation.
See my answer to Matthew above. You're better off not using Sprockets to gather your SCSS files.
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
@importinstead. Watch the beginning of this screencast once more to see how Ryan does it.
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?
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
assetsgroup in your Gemfile, as they're considered only for development and test. So, if your gem is in the
assetsgroup, try moving it out of there and see if the problem persists.
Good luck. :-)
To fix this, make sure that in your application.css.scss you delete any '.css'.
Compared to Compass, which one is better?
And if you decide to use Twitter Benchmark, it includes a number of mixing similar to those found in Bourbon.
I think you mean Twitter Bootstrap. And you are corrent, it does provide several mixins to use and variables to manipulate. :-)
I've only used Compass and doesn't see any difference..
which one is better?
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.
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:
Thank you man - you saved me another day of searching :)
I read the GitHub issue comment about the deprecation of the
border-radiusmixin. With Bourbon 3.0 you should use the standard CSS