Managing Your CSS Development with Sass and Compass
If you know what you’re doing, why not write it out straight? This is one of the main arguments when it comes to considering switching to a CSS preprocessor, such as Sass or LESS. Jason Woodward, being a programmer, understands the benefits offered by Sass to manage styles. By moving past standard CSS you become able to use mix-ins and variables to help reuse common styles as opposed to bloating your stylesheets by constantly rewriting the same code, says Woodward, co-found and CTO of RecoVend, Inc. Writing CSS more like a programmer helps to streamline development, and allows for easier readability.
So what can you do with Sass you can’t do in CSS? Sass allows the use of nested selectors, Woodward says. This makes your overall code much cleaner, and keeps you from repeating the same classes or ids over and over again. You’re able to nest media queries lower and closer to where they need to be. You’re also able to use the @extend feature, where you can re-use the styles you have created for different classes. If you have a simple base style that will be re-used, it becomes much quicker to extend previous styles than rewrite them over and over.
Sass also allows for the use of MixIns, which are along the lines of macros or functions. They allow you to set up variables to be used throughout your stylesheet by creating an @mixin and including it within your styles by use of @include. Woodward touched on Compass, a library filled with pre-built mixins for ease of use in Sass.
Switching to a preprocessor like Sass may seem like an unnecessary step, after all, you already know CSS. But I encourage you to take the time to look further at the functionality Sass offers, and consider the benefits of less bloated, easier to read stylesheets.