factory-1516381_1920-thumb.jpg

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

002-Sass-004-1.png

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.

 

Windows

002-Sass-004-11.png

  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.

 

MacOS

002-Sass-004-12.png

  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

 

Password:

 

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 ?

 

002-Sass-004-2.png

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.

002-Sass-004-13.png

Susy

002-Sass-004-3.png

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

002-Sass-004-4.png

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

002-Sass-004-5.png

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

002-Sass-004-6.png

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

002-Sass-004-7.png

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.

 

002-Sass-004-8.png

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

 

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

 

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$
C:\Production>

 

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

 

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.

 

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.