Compass and Sass: Must-Haves
Update (May 11, 2016): The good news is that Ruby is no longer required to use Sass. I also dropped Compass and now just use Sass with whatever task runner I'm into to compile Sass into CSS. Read more in in my newer article – “The Benefits of Dropping Compass As a Web Project Dependency”.
I kept hearing about Sass and Compass and finally gave them a try a few months ago. Now I don’t know how I ever lived without them!
Benefits
If you want to have more fun coding CSS, not have to hand-code vendor prefixes, and write CSS with less repetition, definitely give Sass and Compass a try.
What is also awesome about Sass is that you don’t need to start using all of its features at once. You can just write regular CSS inside a .scss file.
Downsides
You have to run a pre-processor to generate CSS from your Sass code every time you want to view it in your browser, but this is something that can just be running in the background as a watcher and will process your code into CSS whenever a stylesheet is updated. Since I normally work on linux, I run Guard’s compass watcher for this in the background for each project I’m working on. On the plus side, it immediately shows errors if you have an error in your Sass code. I also have the Guard-livereload gem installed so Guard refreshes my browser page whenever there is an HTML or CSS change. (Note: This also requires a browser extension to work, as noted in the guard-livereload github readme.)
Getting Started
For getting started with Compass and Sass, see thesassway’s docs. Both Sass and Compass are installed as Ruby gems, so Ruby is required.
References
- The Sass tutorial: includes instructions on key features like nesting, variables, and mixins. What is also awesome about Sass is that you don’t need to start using all of its features at once. You can just write regular CSS inside a .scss file.
- The Compass docs: include a lot of helpful best practices on usage and on ways of architecting your Sass files.
As the conclusion in thesassway’s getting started guide says, “Do it. Do it now.” You won’t regret it!