Column

Sometimes CSS feels like it stands for “Complete Sh*t Show.”

Lucky for us, there’s a tool to help get our CSS under control. This tool is Sass; Simply Awesome Style Sheets. Well, actually: Syntactically Awesome Stylesheets.

Sass is a preprocessor for CSS. Just like PHP & Drupal create Drupal’s Very Rich and Enhanced Markup™, Sass does the same for CSS, but properly, by taking your .scss (sass) files and turning them into super .css files, with variables, functions, and other fancy powers.

.sass files -> [magic thingie] -> .css

Install Sass

Installing Sass on your machine is straightforward, if you’re not afraid of the terminal. Simply do a "sudo gem install sass".

Boom.

You’re ready to get Sassy.

But if the terminal gives you agita, you can install Sass with a GUI, a complete list can be found on sass-lang.com/install or LiveReload.com.

Here’s a video showing how this process works: http://wdog.it/4/1/video

Setup your Drupal theme

In order to make Sass work in your theme, you need:

• a Ruby config.rb file, for configuration;
• a Sass folder for all your Sass files;
• a CSS folder where all your compiled CSS files will be created.

Say Good-bye to Your CSS Files

First, accept that once you convert your CSS files to Sass, you will never again have to look into the CSS folder.

Your days of fiddling directly with CSS are over, and everything is gonna be OK.