In a previous article, appendTo’er Augusta Hammock wrote about the CSS pre-processor Sass. In this article I’m going to cover Sass mixin/function libraries, which are very helpful additions to a Sass project. Libraries like Compass and Bourbon, which are the two we’ll be covering in this article, essentially just contain a bunch of handy Sass mixins and functions that are already written for us.
A quick note on performance: if you’re worried about referencing another library, like you would be with, say, jQuery, don’t be! Compass and Bourbon are both just written in Sass and compile to a single CSS file. So there are no performance hits when using these libraries.
Compass, installable via a Ruby gem, seems to be the more common choice of libraries, as it’s been around for a while and has quite a bit more mixins and functions to choose from than Bourbon.
A Compass project requires a
config.rb file to set up the paths, folders to watch, output style, etc. A sample configuration looks something like this:
http_path = ‘/'
css_dir = ‘assets/stylesheets’
sass_dir = ‘assets/sass’
images_dir = ‘assets/images’
relative_assets = true
output_style = :compressed
With the config file in place, it’s then as simple as navigating in the terminal to the folder the config file is saved to and running
compass watch. Without referencing the Compass library (we’ll cover this next), the watch task will still compile your Sass files just as if you were running the
sass --watch command.
To actually access Compass’s library, in your base CSS file you have to declare
Keep in mind you’re not actually importing a file that will be outputted, but rather it’s just a way to gain access to the library. Once it is “imported”, you now gain access to the hundreds of mixins and functions Compass provides.
There’s no way I could cover all of Compass’ mixins in this post, but there are several notable ones that certainly make Compass worth using.
- CSS3 vendor prefixing
- Sprite generation
- Multiple background images
- Sticky footers
- Inline data helpers
Again, I won’t list them all, but here are some popular and unique functions:
- Color functions
- Image dimensions (returns the height and width of images; crazy!)
- CSS2 fallbacks
- Saturation and lightness
Also installable via a Ruby gem, Bourbon was created by the folks at Thoughtbot. According to Kyle Fiedler, product designer at Thoughtbot, “Bourbon was created because the designers at Thoughtbot were making the same set of mixins and functions for every new site that we started. We wanted to have more consistency within our SCSS files and to more easily get off the ground”. To paraphrase further, he mentioned on Quora that Bourbon will “never reach the same amount of features or robustness that Compass has”.
Bourbon does not require any config files to get set up. Once it’s installed on your machine, you can instantiate a new Bourbon “project” by navigating in the command line to your project’s
css directory and running
bourbon install. This will install a new
bourbon directory with a bunch of SCSS files that contain the mixins and functions.
Watching your SCSS files for changes and compilation is done the exact same way you would watch normal SCSS files. In the command line:
sass --watch css/scss:css (or however you have your directories structured). There is no Bourbon watch task or anything like there is with Compass. It works the same way as if you created your own mixins, so that’s nice.
Now to actually access those mixins and functions, inside your main stylesheet (usually
style.scss), just call
Like with Compass, the
@import statement doesn’t actually import files that will be compiled; it just gives you access to the mixins and functions.
Some commonly used Bourbon mixins include the following:
When comparing Compass to Bourbon, I find a lot of similar mixins and functions. The most commonly used mixins from these libraries are the CSS3 mixins that provide vendor prefixes, and both have the bases covered there. However, I have to say that Compass does have an edge over Bourbon with CSS3 mixins. Bourbon has deprecated several CSS3 properties (like
border-radius). In the current version, the mixins still work (albeit spitting out a deprecation warning in the command line), but in an upcoming version release they are going to remove them. I understand that many browsers have adopted the standard syntax for these properties, but what about users on older versions? We can’t write them off completely.
While we’re on the subject of the CSS3 mixins, I also want to point out that Bourbon does not have a
border-radius mixin. It has mixins for targeting the side border radiuses (
border-top-radius, etc.), but not for the general all corners
border-radius. I find this somewhat odd because, like I just mentioned, older browser versions still need prefixed, which means when writing
border-radius you have to include all the vendor prefixes yourself.
The two libraries have other unique mixins and functions that can be very useful. Bourbon, for example, has a golden ratio function that determines the golden ratio of a number. Compass does not. Bourbon also has a function for generating ready-made buttons. Great for developers that want quick and dirty styling without recruiting a designer. Compass, on the other hand, has a handy function for generating image sprites. And one for sticky footers. And one for inline data helpers. So as you can see, they both have their upsides with unique mixins and functions.
Overall though, Compass definitely has a wider variety of mixins and functions to choose from, although one would rarely touch the surface of its functionality. In wrapping up, I’ll just say that I can’t find a clear winner. Where one or the other falls flat, you can always write your own mixin or function.
And if vendor prefixing is all you’re after in a mixin library, let me introduce you to Autoprefixer.