Part One: Compass and Sass
As a Ruby on Rails developer, you have a lots of choices for creating visually wonderful websites. And with the introduction of Sass in Rails 3.1, CSS has become easier to code then ever. But, say, your Rails app grows and with it so does Sass and CSS. With such growth, your files expand. You begin distributing Sass and CSS code to different files, files such as header, footer, content, but, all this becomes a messy business. Get the picture? What if you could consolidate each file to, say, just a file or two? Well, with Compass and Sass, you can!
This article deals with the introduction and installation of Compass and Sass and their basic features.
Solution with Compass and Sass
Compass is a generic-framework that heavily uses Sass to generate CSS output. Sass, on the other hand, is a metalanguage that implements programming functions such as “nested rules, variables, mixins, selector inheritance, and more”. Compass and Sass are tightly coupled and are marriage in heaven for web designers: the two eliminate redundancy if you were to code everything in CSS. And, if you are currently implementing CSS3, then you’ll love Compass and Sass. Compass has many great CSS3 functions, such as box-shadow, that saves you so much time typing vendor prefixes.
Compass and Sass Features
- Top Level
- CSS Rest
- Basic Element Styling
- Basic Structural Rules
- Rules for Browser Inconsistencies
- Form and Table Styling
- CSS Grid
For this example, I am using iMac and its Terminal to generate necessary files and move around file structure. My Ruby and Rails are run on RVM.
With the RVM installed on your computer (and I hope you have RVM installed on your system, if not, take a look at the RVM site for the installation guid), initiate the following command;
gem install compass
However if you are not using RVM, initiate the following command;
sudo gem install compass
Now make sure compass is installed:
If all went well, you should see compass's version number as well as its credits.
Creating a Compass Project
To create a Compass project, it's very simple.
compass create /path/to/project --using blueprint
Notice at the end of the command, I am using the option flag
blueprint as the CSS framework for the project. I could have left out both of these and would have ended with the project itself. But I like blueprint, so I am going to leave it the way it is. Oh, and if you wish to have something other then the blueprint, you can. Just make sure you have the right type of framework compatible with Compass. Here are a few for your creative juices. However, it isn't necessary to have any frameworks. Compass has it's own CSS library too!
This command also spits out initial file structure Compass has created for you, and it also tell you to place the last part of this message, which is the stylesheets location, in your index.html page. Do that and you are ready to move on to a final step before getting into the application itself. Here is my stylesheets code:
href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css"
During this final step is make sure that Compass watches for any changes in your files. In this case, files that end with .scss or .sass. These files will then be converted to CSS (generated into CSS) as the final output! Wow. That's going to be a lot of CSS! Yes, but it will be a compressed CSS that's much faster for browser rendering. To do so, issue the following:
compass watch /path/to/project
That's it! From here onwards, all we need to do is get into one of those .sass or .scss files and start coding.