drilix.com

Freedom, Community & Sustainability

Convert your plain CSS to SASS and Compass

January 19, 2015 -- William
Last modified on August 2016
Duration: +- 15 minutes

Sass is a preprocessor, in other words, it is a simple language that generates CSS. The advantages of using Sass will become obvious in this tutorial. The primary goal is to take the boredom away of repetitive code in CSS.

The Sass language is very similar to CSS, in fact, you can write plain CSS and it will be considered valid Sass! (but the oposite is not true).

One thing to be aware of is that there is a legacy version of the Sass language, called Sass, and a new version, called SCSS. The new version works with CSS3.

In order for a browser to display our page we need to interpret the SCSS file into CSS. This is done with Compass. Compass takes care of everything, it installs Sass, organises folders and generates CSS files.

So let's get started! We will first install Compass (and get Sass included).


gem install compass

(If this command doesn't work, check that you have Ruby installed. The command to install is sudo apt-get install ruby-full build-essential).

Once everything is installed you can navigate to your theme folder and create a new project called "style". This will create a folder called "style" that contains your SCSS and CSS files. All the commands after that will assume that you are inside the "style" folder.


compass create style
cd style

Note that, in the "style" folder, there is a configuration file named config.rb. Every compass command that you run must be made inside the same folder as config.rb.

In this configuration file you can define

  • the folder where the SCSS files will be
  • the folder where the CSS files will be generated
  • the folder where images will be sorted
  • a folder for javascript
  • ...among many other things that are possible.

nano config.rb <Press Enter>

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

Now that everything is ready let's put it to work! As a starter, copy some .css files that you already have into the style/sass/ folder. Then rename the extension of every file from .css to .scss. Finally, compile the scss files using compass:


compass compile

Now check out the files in the css folder and notice that Compass didn't change the code very much. It probably just indented the code correctly and added some comments. The fun really begins when you start to write your CSS code into SCSS. To give an example:

CSS syntax


blockquote, .first {
  background-color: orange;
}
blockquote, .last {
  background-color: orange;
}

Note that we are repeating the blockquote and orange twice. Although this is a simple example you can grasp that SCSS can be very practical:

SCSS syntax


$bgcolor: orange;
blockquote {
  .first {
    background-color: $bgcolor;
  }
  .last {
    background-color: $bgcolor;
  }
}

The best way to learn Sass is to visit their website: Sass guide. There you can find really easy examples and explanations.

You might have noticed that all this came at a cost: scss files need to be compiled after every change. There's an easy solution for that. During development you can set Compass to watch the scss folder for changes and immediately compile it to CSS.


compass watch

Note that you need to let Compass running on the terminal. Some IDEs come with a terminal and allows you to easily control the compass watch during development.

When debugging your layout, you will see on your browser inspector a .css file but you will need to work only on the .scss files and never on the .css. In order to help you find the correct scss file you can compile them again with the flag "--sourcemap".


compass compile --sourcemap

After doing so, you will see on your browser's inspector the name of the scss files instead of the css. Just imagine how your life would be without this command! You can also run the watch command like this to have at the same time the scss file and the compilation on the fly.


compass watch --sourcemap

This is it for the scope of this tutorial. You are now able to create Sass projects, convert an existing css file into Sass and start taking advantage of a better way to write stylesheets!

Add new comment