Using SASS/Compass on Windows & Mac for CSS web design
If you're a CSS fan like I am, you've no doubt heard of CSS preprocessors such as SASS and LESS already. I see LESS mentioned more often outside of the Rails world, which really shouldn't be the case. I feel like LESS has more overhead in the site/app itself, and is thus slower. I haven't done any scientific tests on this, but the fact that LESS recommends including the css and js files for it in your site to use it make it inherently slower than SASS, which is compiled on-the-fly as you save your .scss files and never included for the client to load. Even though SASS is compiled into CSS via ruby, you can easily use it during all web development.
Advantages of either preprocessor (explained more on the SASS homepage with examples):
- CSS variables (reduces reuse of things, for example: hex colors, numbers, etc.)
- Mixins (allows you to condense 5-10 lines of ridiculous CSS3 cross-browser junk into 1 line, among other things)
- Nesting (stop repeating yourself with a million rules with the same prefix)
- Selector Inheritance (again, stop repeating yourself)
SASS is nice, but it really requires Compass to be installed in order to use its 'compass watch' functionality, which compiles your SASS into normal CSS when you hit save. SASS apparently has its own watch capabilities, but Compass seems easier. Plus, Compass can compile production stylesheets. If you're a heretical Windows user like me, you're in luck, because Compass, SASS, and ruby are all compatible.
Here are steps to installing Ruby, SASS and Compass. The goal is to get a runnable 'gem', 'ruby' and 'compass' command in your terminal:
- First, install Ruby. Use RubyInstaller for Windows. If you have a Mac, Ruby is already installed. You'll probably also want rvm (Ruby Version Manager) if you're doing much with Ruby/Rails.
- Next, install SASS. You can visit the SASS page for install instructions. It's quite easy, though. Open up a Windows Command Prompt or Mac Terminal and run 'gem install sass'. This actually might not be required with Compass, but I do it anyway.
- Last, Install Compass. You can visit the Compass page for install instructions. Open up a Windows Command Prompt or Mac Terminal and run 'gem install compass'.
Now, how do we use these goodies? Here's how:
- Make the Compass Project. Assuming everything is installed correctly, go into the folder of the website you're developing. I like to make a folder called 'css' and then go inside of it. Open your Windows Command Prompt in that folder (use SHIFT+Right Click and "Open command window here" on Windows 7 in order to not have to cd into the folder -- annoying) or navigate there on a Mac terminal. Do 'compass create <projectname>'. I do 'compass create scss' so I have a generic project name for future reuse.
- Watch the Compass Project for changes. Type 'compass watch' in your terminal. Compass will begin polling for changes. You're ready to start using SASS in Windows, Mac, and not necessarily in a Ruby/Rails project!
- Start editing SASS files. Inside your Compass project you have a 'sass' folder with some basic files. These require a bit of manipulation to get into a nice state for best-practices. Note that they're all with the '.scss' extension. SCSS is valid CSS code (but the fancy preprocessor features aren't recognized in browsers until compiled), so use that instead of the older .sass files that were used in the past. Those old ones aren't valid CSS.
- Include 'screen.css' (not .scss) in your website. It's located under your Compass project in the "stylesheets" folder and gets recompiled by 'compass watch'. With best-practices (covered in the tips below) you won't have to include more than 1 css file in your app if needed.
Here are some tips for best-practices using SASS:
- Get Matthieu Aussaguel's CSS3 Mixin Library at Github. It contains most of the fancy CSS3 stuff you want to add to your site easily. Other people have mixin libraries too, but that one's not bad. Feel free to tweak them for your projects.
- Make a _base.scss, reset.scss (grab the reset from 960.gs) file and screen.scss file. Include the base and reset files in your screen.scss by doing
- Make other scss files for separate sections of your page/app. I use one for menu.scss, text.scss, and others. You'll want to @import these as well. As long as you import these into your screen.scss file, they'll be compiled into screen.css!
- Get the 960 Grid System and copy it into an .scss file of its own. It's very useful.
- Minify your CSS for production. Kill your 'compass watch' with CTRL+C and then run 'compass compile -e production --force'
- For additional info check out the SASS book from Pragmatic Publishing. They always have incredibly high quality books.
Have fun! I use this technique for building Drupal themes with SASS/Compass as well as standalone apps.