This article is also published in french - Installer et préparer Sass pour la production


Let us take a step back, and then gradually, let us run all the installations ... Attention: If you wish, you can install only Sass and Compass in order to follow this series of articles.




Compass, is often controversial, especially since the emergence of post-processor management, prefixing, as well as in the opinion of authors like Hugo Giraudel - Why I Don’t Use Compass Anymore.


However, Compass provides flexibility in the management of projects and especially through its famous config.rb configuration file. We will install it for this series of tests.


Installation of Sass and Compass under Ruby


Regarding the illustration of this series of articles, we will work under Ruby. Although in the previous article, at the chapter The compilation and tools available; Under Ruby, everything is already discussed, I suggest you quickly go around here and resume from scratch.




  1. Make sure you have run Ruby Installer,
  2. Once Ruby is installed, from the Start menu, launch Start Command Prompt with Ruby.
  3. We will use this command dialog to track and install the various necessary tools.




  1. Ruby is present by default.
  2. Launch the Terminal.
  3. In the following commands, you may get a type error message « …ERROR : While executing gem … (Gem ::FilePermissionError) You don’t have write permissions for … ». You will need to use the command sudo.


In fact, you must precede the commands indicated by the command sudo.


For example, if the command is


gem install sass


It will then be necessary to type


sudo gem install sass


Your administrator password will then be requested, to confirm the installation process




Enter it (be careful you will not see the cursor move, it's normal) and validate. The installation process should then continue normally.


Verify if Sass is installed (Windows and Mac OS)


Now whatever your operating system,

  1 –  Check if Sass is installed by typing


sass –v


If Sass is not present please install it


gem install sass


2 – Check if Compass is installed by typing


compass –v


If Compass is not present please install it


gem install compass


3 – Sass and Compass should be installed


Would there be any unavoidable extensions ?



Irrespective of the type of project, are there any libraries are extensions that will have to be installed to complement Sass?


There is no one answer to this question. It all depends on the needs and the approach taken towards the project.


Let's quickly go around the main plugins available. (The following set of installations is provided for illustrative purposes only).


4 – Check if the extensions that follow are already installed


gem list


The list of already installed gems appears in your command palette.




Susy is recommended if you are approaching grid mode positioning. This plugin remains an indispensable tool to match your highest requirements.


It is true that from premium premises, it may seem a labyrinth, but think again, it is very easy to use and brings enough capacities under the hood in order to respond to the most complex layouts.


5 – If Susy is not listed in the gem list, please install it


gem install susy




Breakpoint is an indispensable complement for a more flexible management of the break points between each display mode. This extension, which is often confused with certain possibilities integrated into the various grid modes, remains truly complementary and relaxes the writing of media requests.


6 – If breakpoint is not present in the list, please install it


gem install Breakpoint




Scut This SCUT library for Sass-CSS Utilities brings a lot of shortcuts and simplification of writing in general, both on the display and on typography.


  7 –  If scut is not present in the list, please install it


gem install scut


During this installation, you may receive an error message of type « … ERROR : Could not find a valid gem … ». No worries, default Ruby automatically adds https://rubygems.org, but not the unsecured version.


It is therefore possible to do it manually, taking the risk of course not to draw on a secure server.


gem sources --add http://rubygems.org/
Do you want to add this insecure source ? [yn]


You will have to explicitly validate this addition, confirming by y or refusing by typing n.




Typesettings is a plugin that manages typography in an almost intuitive way, respecting the ratios according to the device model, and, by bringing an integrated vertical rhythm.


Simple to use, this library becomes indispensable to who wants to work the text as well as the layout.


Unlike other plugins, it will be necessary to clone the github at the time of import. We will see this later at the time of the configuration


GitHub - ianrose/typesettings: A Sass or Stylus toolkit that sets type in Ems based on modular scale, vertical rhythm, a… 




normalize-scss or compass-normalize… Before any intervention on the CSS, it is always strongly recommended to ensure the reset of the default values of interpretation for each browser.


You have the choice of two gems, knowing that the second has not been updated for nearly 6 years, and that Necolas offers you an alternative under Node, Normalize.css - A modern, HTML5-ready alternative to CSS resets.


In this workflow, we opt for the first proposed gem.


8 – If normalize-scss is not present in the list, please install it


gem install normalize-scss


And more…


If you work under Ruby, do not hesitate to visit the hosting platform of the Ruby Community, RubyGems, to find the various gems available, and, possibly supplement your work environment according to your own needs.


9 – Quickly redo a check of the gems that are installed in your environment


gem list


Commissioning and use


Once the environment is installed, and in order to work, we will have to create a project (if you do not have a project in progress), or to monitor it (if you are working on a project already created).


If Compass has been installed, it is possible to use its services to manage the various projects. We will see that there are various possibilities.


Creating a project


On its site, Compass offers a command line generator Tell us about your project and we'll help you get it set up.



This service generates the necessary commands directly, that we will only have to copy, paste in order to use them.


Whatever your needs, the mini form, put in place, goes to make it possible to define each of the necessary parameters, namely:


  1. Creating, or resuming, a project (install or create)
  2. If you choose New, you will have to enter the name of the project, which is the name of the folder that will be created to contain all the necessary files
  3. The acceptance, or not, of the implementation of a default startup template, (except in some cases, we will often opt for No and we will create a custom tree, see point 5)
  4. The syntax used by the project (Sass or SCSS)
  5. Customizing the tree to use, defining the naming of source folders, CSS destination, Javascript and images


On a traditional creation basis, the command line should look like:


compass create the_name_of_the_project_folder --bare --sass-dir "scss" --css-dir "css" --javascripts-dir "js" --images-dir "imgs"


Copy this command line and switch to the command console, or the terminal.


By default you should be in the home directory, that is your user session.


Move this pointer to your production folder. If you do not usually work with the console, or the terminal, rest assured, what we have to do is really not complicated.


Whichever directory you are in, enter


If you are on MacOs




And if you are under Windows


cd /d




In one case, as in the other, drag and drop just these prevous instructions, the folder in which you wish to create your project folder.


Let's say you have a folder called Production located at the root of your main hard drive.


If, therefore, you drag the Production folder following the previous instructions, this should give one of the following two lines


cd /Production
cd /d C:\Production


Make sure to give the focus to the command console, by clicking on it, and validate by pressing the enter key.


You will move the pointer of your console to the new location. The result should be, depending on your environment, one of the following two lines


YourSession :Production YourSession$


It is then enough to paste, afterwards, the command line proposed previously by the site of Compass and to validate.


compass create the_name_of_the_project_folder --bare --sass-dir "scss" --css-dir "css" --javascripts-dir "js" --images-dir "imgs"


A series of information will then appear in the control console informing you of what has been achieved. Open the Production folder, where you will find your project folder, the_name_of_the_project_folder, which should contain :


  • A scss folder; which will be the source folder containing the various scss files
  • A config.rb file, which contains all of the configuration parameters defined through the command line


We will return later to this configuration file, let us continue for the moment, this first approach of commissioning and use.


Monitoring of a project, and compilation


Once the project is in place we will have to ask to compile our source files, *.scss and/or *.sass, into *.css file(s).


This is possible on a one-by-one basis


Using the command


compass compile [path of the project file]


Or by placing the command prompt pointer in the project folder and simply using the command


compass compile


This is also possible to automatically handle it


When working on a project, it is often much more flexible to ask Sass to monitor the working folder and compile each time that a source file is saved.


For this purpose, and in the same way as an ad hoc shot, it is possible to use one of the following two commands


compass watch [path of the project file]


Or if the command prompt already points to the project folder


compass watch


Alternatives through a system file


Whatever your environment, it is possible to create, compile, monitor your projects using files *.bat (under Windows) or *.command (under MacOS).


These files can be prepared in advance and reused across projects. They allow us to directly launch create, compile or watch instructions without having to go through command lines.


To use them, simply place them in the project folder (or upstream of the project folder to be created) and launch them by double-clicking them.


Under Windows


Two .bat files can be created, for example create.bat et watch.bat (the names used here are purely arbitrary). These files will then be used to manage the creation and monitoring of a project.


Their content is quite explicit since they are in fact the command lines used previously:


compass create




compass watch


Under MacOs


Like Windows, just create two .command files, for example create.command and watch.command, which will be set up and used as the previous two.


However, these two files will contain an additional instruction, cd `dirname $ 0`, which will allow to explicitly position the command line on the folder containing the whole script.


cd `dirname $0`
compass create




cd `dirname $0`
compass watch --force


The --force statement, as its name implies, forces the system to save the new file, overwriting the old file already present.


Then, and regardless of the operating system,


You can, of course, complete the command lines with any corrections you want to make, for example:


compass create --bare --sass-dir "scss" --css-dir "css" --javascripts-dir "js" --images-dir "imgs"


Then, in order to use these files, simply put the desired file in the project folder, (or upstream of the project folder to be created, if it is a creation and the project name is defined), and double click on it ... the magic of the command line will take care of the rest.


So in summary, if you create a project, use the file that contains create, if the project exists and you want to compile on demand, use the second.


The configuration file, config.rb


As soon as you work with compass, a configuration file, config.rb, is automatically created, (of course, if it is not already present in the project file).


By default, various configuration values appear with the values defined, either by the parameters of the command line (as we saw in the previous example), or data that is specified in the default values file located in the installation folder of compass :




In any case, and if necessary, the config.rb file can be reconfigured as required.


So by default, the config.rb file contains


require 'compass/import-once/activate' # Require any additional compass plugins here. # Set this to the root of your project when deployed: http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts" # You can select your preferred output style here (can be overridden via the command line): … # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass


Plus a number of lines preceded by the # sign. These are comments and can be deleted if you wish.


Depending on your needs, you can reset these values to


require 'compass/import-once/activate'
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "imgs"
javascripts_dir = "js"


As well as adding other values, drawing inspiration from the article Ruby-based Configuration Reference.


If you have installed plugins and want to use them in your project, you will also have to specify them by adding the appropriate commands to the file header. Based on the installations carried out in the previous article, here are the additions:


require 'susy'
require 'breakpoint'
require 'scut' 
require "normalize-scss" 

require 'compass/import-once/activate'
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "imgs"
javascripts_dir = "js"


Except for Typesettings which function differently, you will find the necessary instructions in the Github plugin.


GitHub - ianrose/typesettings: A Sass or Stylus toolkit that sets type in Ems based on modular scale, vertical rhythm, a… 


However, we will also discuss this in a future article.


Performance tests


Everything is ready ... launch the observation command, either on the command line compass watch, either from the file watch.bat or watch.command create previously.


Create a file test.scss, that you save in the folder scss and add the following content.


$couleur: #363;
.uneclasse {
  color: $couleur;


As soon as you save this file, you should see the file test.css in the css folder. This file should contain


.uneclasse {
  color: #363;


If this works, perfect ... so you can delete these two files, if not, go through the installation steps and see where it was possible to hook.