Monday, 1 December 2014

A peek at the configuration settings of Sass and Compass.


In the previous article, I introduced what sass and compass is all about, how it can be setup and how to create a new project. In this post, we are going to have a look at some of the settings in sass files and how to compile sass files in other to produce Css files. So buckle up and let the fun begin.

A look at config.rb

When a new compass project is created, compass will create a config file in the root directory of the project. This configuration file contains some of the settings that is used to control how the your css is produced and formatted. If you can remember in the last post, I showed you how you can create a sass project in the command line (terminal), using the code shown below:

compass create --bare --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --fonts-dir "fonts" --images-dir "img"

Now if we run this code shown above, apart from creating the css and sass folders for you, it sass will  also assign your directory names to the settings as shown below. 

This settings serve to tell sass how to navigate around the your project directory.

Another setting that is also seen in sass is the output style setting. What this setting does is determine how your sass code  will be formatted when converted to css after compilation. 

# You can select your preferred output style here (can be overridden #via the command line):

# output_style = :expanded or :nested or :compact or :compressed

The setting is commented out, so to make use of it just un-comment (remove the hash bang in front) and choose one of the options provided.

Now if you select :expanded, sass will format your css just as a regular css with lots of spaces so as to aide readability as shown below

.header {
  margin: 0;
  width: 100%;
  padding: 10px;
  background: #b9394d;

.header h1 {
  line-height: 1.6;


Setting :nested on the other hand makes sass to nest your css code block, indenting it to give a visual cue that the block under is the child of the block above as shown below.

Notice that .header h1 is indented a little bit under .header in the picture shown above.

On the other hand, if you select :compact as your output style, sass will try to compact every code block in the style sheet into a single line as shown below.

.content { margin: 0; padding: 10px; font-family: Lato, raleway, helvetica, sans-serif; }

Finally if you select the last option (:compressed), sass will minify the css, removing all the spaces so as to reduce the file size and make the css unreadable.

.two-cols,.radial{text-align:justify;border:1px solid gray;padding:5px;-moz-column-count:2;-webkit-column-count:2;column-count:2;-moz-column-rule:1px solid #e6e6e6;-webkit-column-rule:1px solid #e6e6e6;column-rule:1px solid #e6e6e6;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;-moz-box-shadow:2px 2px 2px #737373;-webkit-box-shadow:2px 2px 2px #737373;box-shadow:2px 2px 2px #737373}

As you can see the style is now a jumbled mass of unreadable code.

Another major settings that is important in the config file is the relative_assets and the line_comments.

The relative_assets when turned on specify that assets such as images can be identified in the sass file using just their name and extension. On compilation, compass will then convert it to its full link. Remember when we were setting up our sass project we provided the image and font directories. Now Compass will use it to relatively link our assets appropriately in the css produced.

The line_comments on the other hand when turned on, will output a comment on each block in the css stylesheet pointing to the line in which the code block can be seen the sass code. It is advisable to turn on this setting when developing your app and to turn it off when deploying the application.

Compiling sass file into css

There are two major ways in which the sass file can be converted into a css file which the browser can consume, These are: the manual compile method and the automatic compile method.

The manual compile: This method is used to compile sass files into css by the developer at will. When using this method the developer will transform his sass files into css. If the developer does not run the compile method, the file will not be converted into css. It can be achieved by running this code in a command line pointing to the root directory of the sass project.

compass compile

The automatic compile: In this method, sass engine watches the core sass files for changes when saved and then automatically compiles the files into css. This is usually the most preferred method as the file is quickly and easily converted into css thereby saving time and improving performance. To let sass watch your files for changes on save, run the following code.

compass watch


In this article we looked at some of the settings present in sass, how to adjust the settings and how to convert sass files into css. Hope you have grabed one or two things to take away with you in this article. Happy sassing! 

No comments:

Post a Comment