This entry is part 4 of 9 in the series: Understanding and using Sass

• Working our mockup with Sass and Susy

  In order to better understand the implementation of everything we have seen so far, including the use of Sass, we are going to deploy a real workflow by really relying on the implementation of a site.

• First steps and first files

  After having seen all the concepts that are interesting to discuss at the same time as Sass, it is important to start to draw up our first files and our first lines of code in order to put all this in activity.

• How to distribute partial files

  SassScript goes well beyond the simple use of variables or mixin, we will explore an approach to work with a much more successful template to design our site or application development.

• Setting Sass with Compass

  Although Compass is no longer maintained, we will see an approach that uses it and allows us to continue to benefit without compromising our productions.

• Install and prepare Sass for production

  Working under Ruby is a real panoply that we have under the mouse. Let’s see how to install all the facets that can be very useful to us.

• Deploy Sass effectively

  Since democratization and the use of preprocessors, various concepts, mainly based on object-oriented programming, have emerged and allow us to approach Sass in a very modular way.

• Sass – The compilation and tools available

  Although Ruby is a very open and scalable approach, there are various ways to compile Sass in CSS, all of which can present their interests and benefits.

• What is Sass – Introduction and presentation

  What is a preprocessor and what is Sass? This post will introduce those basic concepts and what can be expected from such a technology.

• Understanding and using Sass

  This present series will not cover Sass syntax, but will look at how to use Sass and develop concepts allowing us to exploit the best of the possibilities Sass has to offers.

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

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 le_nom_du_dossier_projet 
--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

cd

And if you are under Windows

cd /d

Then,

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

d /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

VotreSession :Production VotreSession$
C:\Production>

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

compass create le_nom_du_dossier_projet 
--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 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

and

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

and

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 :

{C:|Applications}\Ruby22-x64\lib\ruby\gems\2.2.0\gems\compass-1.0.3\lib\compass\app_integration\stand_alone\configuration_defaults.rb

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.

https://github.com/ianrose/typesettings.git

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.