SASS is a CSS preprocessor. Think of it as a set of tools to streamline "regular" CSS development. With SASS you use .scss files though, which are a superset of CSS3. You can copy and paste all your CSS, right now, into SASS files - and everything will work just fine. Except first, you need to compile your .scss files into .css files. The end result is the same CSS code, except in easy to change configurations and in 1/5 the time.
Compass is a framework utilizing SASS. As great as anything is these days - there is always something to make it a bit better. In this case though, that bit is a huge bit. To start with, Compass lets you easily configure, compile, and monitor your SASS via simple command line. To end with, it lets you build highly complex, reusable theming mechanisms that could be applied and handle 75% of every single one of your projects stylesheet design. Of course, one must learn to yield that amount of power first.
There are really tons of reasons to add Compass to your workflow. While it's nearly impossible to cover them all, we are going to try and hit all of our favorites (and then probably some more).
You can structure your files logically, as you might with web applications. Mirror your unique Javascript views with separate files, and set up others for your common DOM elements. Define your common asset directories and use built-in functions to build absolute or relative URLs for final production deployment.
Start nesting your selectors! Sometimes you might feel like you are just repeating the same code over and over. Nested selectors adds to the logical structure and prevents scoping issues. Having the ability to utilize parent selectors from within really boosts organization potential.
Using a preprocessor always has the downside of compilation times, however if you structure your files well you can take advantage of caching functions to speed up compile time. Utilizing watch functionality allows you to leave Compass running to monitor your files for any changes and automatically compile. Couple this with a browser extension to easily reload CSS, or even take it one step further with a live reloading solution, and suddenly you will start to recognize the valuable timesaving benefits.
Who isn't tired of dealing with vendor prefixes for modern web effects? In order to support older browsers you might find yourself writing more than half a dozen, or utilizing a series of online tools to generate them all for you. Compass comes with all the mixins you need to write a single line of code and automatically generate the lines of CSS for full cross browser support.
Still, with standardization of CSS rules still a ways out, who knows what may change in the future. Do you really want to try and go back through thousands of lines of CSS to update these vendor prefixes? Compass doesn't mind updating itself, as long as you remember to update your gems once in a while. Just give your SASS a quick recompile and any new vendor prefixes will be taken care of for you.
We really don't think the benefits of utilizing variables needs much explanation. Use it for colors, sizing, and much more. It's good practice though to structure your variables logically and maintain some degree of scoping. Don't go crazy just yet listing out dozens of colors, wait until we go into helpers a bit later...
Generating sprite files is a developer thing more than ever nowadays, but that still doesn't mean all coders enjoy working with graphics. With Compass you can dump all your icons or images into structured directories, with sensible names, and next thing you know you have CSS classes ready to use. You can even add image files and add hover to the name to give your icon classes hover states. When you build for production you only need to worry about the sprite files, and forget that folder overflowing with icon files.
We touched on a downside of utilizing a preprocessor earlier, but now is the time to see where the benefits greatly outweigh the negatives. SASS has full math support, and it can be used directly inline with standard CSS. Compass is nice enough to provide the advanced bits via helpers, all the way up to geometric functions. Once you realize how to couple math with some of the other Compass functions and custom mixins (for example, reading image file dimensions) you can really unlock the power of SASS and Compass.
At the end of the day the majority of people are still doing the same thing on websites: reading. Therefore font handling certainly requires a mention here. In a nutshell Compass makes defining font-faces an easy one line process, but as with many other things, it's best to maintain some degree of organization and file structure. While it's not officially part of Compass, there are some great community add-ons for font icon support as well (if that's your thing, which we frequently recommend it to be).
Now take everything we explained above, and combine it together with powerful logic statement - including conditions and loops. I'm sure the power of SASS is now clearly obvious, especially with the wide range of available community extensions/mixins.
Yes, we know, that above header is completely redundant. Still the fact that we kept it must be some indication of how insanely useful these helpers are. Again, there are any abundance of them, and you will need to go through the Compass documentation (linked towards the end) to read them all. Still, there is a quick summary to get you excited:
Color Manipulation: darken, lighten, saturate, hue, invert... Wait, these aren't even Compass helpers. These are core SASS functions! Of course you also have opacity, rgba conversions, and what's this... functions to completely manipulate all properties at once? So Compass does provide some additional helpers, but either way the syntax is the same. Don't worry too much about that, eventually you start to consider them all the same. No reason to use SASS without something like Compass anyway.
Now you can see why we asked you to hold off on setting up a ton of color variables. With all these functions, you can use them to adjust base color and assign them to new variables - meaning if you change the base variable, the adjusted variables update as well. It's a very flexible color design system if done correctly.
So there's a lot of color manipulation going on here. But what else is there? How about those advanced math helpers we mentioned? pi, cos, sin, log, sqrt, pow - I mean if you are actually using all these frequently, we think you are the kind of person that will have no problem putting them together. Just enjoy the standard syntax and do your thing!
You have probably heard them mentioned a few times by now, but what exactly are they? Many of the things are have already be advised to use are technically mixins that are a part of custom, but there is nothing different about those and the mixins you make yourself. Each is just a "function" with parameters, instead a return value you just list out of CSS/SASS and it's adding to your calling SASS scope.
In fact, if you take anything out of this reading, this might be the one. Understand, from a very fundamental level, what your application is doing. Is it generating thumbnails for user profile icons and staggering alignment down the page? If so, make yourself a mixin for that and pass it relevant variables. Basically mixins are the "classes" of SASS (we don't want to say functions again, becuase well, there are functions too - we'll try to get there). Mixins do exactly what you expect: override and extend whatever is in your current selector, by calling the mixin with variables.
Now what's the difference between extensions and mixins? Extensions can do much more, setting up a hierarchy of functions and mixins, and integrated directly into your ruby configuration files. For most of you, it's something not worth looking into until you are familiar with almost everything else mentioned here.
Image Functions: So Compass really just comes with two of them: image-width and image-height. Pass it on an image filename (no need for a path though, remember that's taken care of the configuration from way at the beginning) and the dimension. Now you can use to set absolute positioning, margin/padding sizes, and much more. Again, coupled with math support and you can create some amazing dynamic layouts.
Extending Classes: If you do this correctly it's probably up there in the "Why use it?" section - however we put it down here because of how how much complexity it can add to your structure. If you structure extensions perfectly it's a very good way for optimization, however it becomes easy to extend too many things. So what do you get if you want to use it correctly? You can do away with half your nested selectors and replace them with extends. You could even consider multiple extends and chained extends. You see now why we stressed organization importance from the very beginning?
We really think everyone is going to love this one: Easy to use and complete CSS3 Transitions/Animations mixins. Ok, maybe that's not quite true, while Compass supports CSS3 transitions (and very nicely if we may add) you will need to add a community extension for true animations. Yet with the huge number of ready to go easing options available through that extension, I don't think anybody can complain.
So far we've been pretty positive in this article, of course, we don't consider ourselves to be very responsible if we didn't provide some warnings on things we have seen really causing people trouble:
Nesting your selectors too deep. If you are going to try to literally mirror application structure you will end up generating a lot of waste. Remember nested selectors are for organization and readability, not as much for limiting the size of your CSS. While it might limit the size of your .scss files, in the end compiling may result in horrendous long CSS files and unnecessary duplication. Try to limit deep nesting to unique components, and keep reusable styles nested lightly. You'll thank us later when your final production CSS isn't 300kb in filesize. Nesting too deep results in unnecessary duplicate rules.
Illogical file structure: We have mentioned it several times now. Do this correctly from the beginning (even though it's tempting to just start dumping in the base, auto-generated screen.scss file) and you won't be kicking yourself later.
