Converting an existing project from css to SASS

Submitted by Micheas on Mon, 07/30/2012 - 14:43

You have probably heard about SASS. If not, click here, and read about it.

Once you read about it you will probably think "I'll try that on my next site."

Don't do that. Covert your current project to SASS right now. Well, not SASS, SCSS.

Unlike SASS, SCSS accepts valid CSS as input so you can use your current *.css files by just renaming them to *.scss.

Well, there is a little more to it than that, but not much more.

First, setup SASS and compass on your dev (I know, I know, I haven't written a post about the importance of dev machines yet. It is coming soon.) machine by following this guide. When you are done come back here.

Second, create a directory named sass in your theme and copy all your css files into it.

Third, rename all your .css files to .scss files. If you are using Linux or OSX your probably have perl installed and can just use the rename command:

rename 's/.css/.scss/' *.css

Fourth, create a file in the base of your theme named config.rb. (The path might be something like /var/www/sites/all/themes/mytheme/config.rb. )

The .rb means that this is a ruby file, just as Drupal written in php, SASS is written in ruby.

The contents of the file should look like this:

# The starting contents for config.rb

# Set this to the root of your project when deployed:
http_path = "../"
css_dir = "css "# Set this to the directory of your current css files:
sass_dir = "sass"
images_dir = "images" "# Set this to the directory of your current images files:
javascripts_dir = "js" "# Set this to the directory of your current JavaScript files:

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false