Getting Sassy With Bourbon
One of my favorite new tools is the Bourbon gem from thoughbot. It is a set of Sass mixins that greatly increases the speed of front-end development. While there are a lot of other options out there like Compass, the simplicity of Bourbon has been its best feature.
To get started, just follow the instructions found on the github repo. We use it in a Rails 3.1 project, so it was a simple as adding a splash of bourbon to our gemfile and then including bourbon in our SCSS files.
The next step is to just start experimenting. You’ll quickly find that Bourbon’s syntax is intuitive and follows normal CSS syntax when possible. It provides you with a basic set of tools and gets out of the way. Want a linear-gradient, box-shadow, and border-radius applied to your awesome div?
1 2 3 4 5
Want to apply your awesome div styles to other elements in a single line? Want to do that while enabling the flexibility of changing the gradient colors? All you have to do is create a Sass mixin and some variables.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
Do you want to use Bourbon’s button add on, but modify your button’s margins and padding on the fly?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Note above that you can use shorthand for the $margin and $padding variables just like you would with plain css. All you have to do is comma delimit them when passing as an argument.
Be sure to find a list of all supported functions, mixins, and addons at the bottom of the documentation. There are some helpful functions like tint and shade for altering colors and useful variables like font-family.
Finally, you can
bundle open bourbon to explore the gem. The source
is well organized and readable. You can see all the work thoughtbot put
into the project to make your life easier.