eclosion-329085_1920-thumb.jpg

This article is also published in french - Sass – La compilation et les outils disponibles

 

In order to get traditional CSS, irrespective of whether the Sass syntax used Sass or SCSS, you have to compile them. For this, we have various possibilities that we will explore in the course of this article.

 

Note that when we are in the experimental phase, or, in development mode, it is sometimes very practical to have a standalone compiler on hand, and online.

 

The platform Sassmeister, allows us to quickly and simply test a combination. To highlight it, open the previous link, and in the left part paste the following code fragment;

 

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

 

See what happens in the right hand side. Do not hesitate to refine the parameters of use, according to your needs, from the Options menu.

You can also employ other similar tools that will directly integrate into your workflow. Depending on your needs, you will have access to various solutions.

 

Under Ruby

 

002-Sass-002-2.png

 

Because Sass is being written in Ruby, it may seem natural to use it with this environment.

 

On Mac, Ruby is already present natively. On Windows, it must be installed, and you will find all the versions, and necessary packages, from the site Ruby Installer.

 

Once you have installed Ruby, on Mac OSx everything happens from the Terminal, and, under Windows, you now have access to a new command prompt from the Start menu, which is Start Command Prompt with Ruby.

 

002-Sass-002-3.png

 

Then, whatever your environment, to install Sass, it happens in the command line, and in the same way:

 

gem install sass

 

In Mac, you will need to use a sudo. Nevertheless, that is all ... there is no need for more steps or installation.

 

You will find videos showing these facilities; On Windows Installation et prise en main de Sass et Compass and under MacOsx Installation de Compass sous Mac OS X.

 

After installation, it is simple to test the functionality.

 

Move your command line by pointing to the working folder you want.

 

In this folder, create a test.scss file that contains the following code fragment and save it.

 

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

 

From the command line, enter the following statement;

 

sass test.scss styles.css

 

Once validated, the styles.css file should be generated and contain standard CSS.

 

In order not to continually launch the compilation instruction, it is better to ask Sass, or compass if you have installed it, to monitor the work file in question, and to compile each time you save any *.scss document.

 

To do this, simply enter this command and validate it;

 

sass --watch sourcesfolder/sass:destinationfolder/css

 

On the Sass side, the first path, sourcesfolder/sass, corresponds to the location of the source files (.scss or .sass) and the second destinationfolder/css path, specifying the destination folder of the compiled files (.css ). Two points must separate the two paths:

 

Although this is not mandatory, if you work under Ruby, the installation of compass can be very interesting, would be only for the management of projects, and especially through its configuration file config.rb

 

http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "libs"
fonts_dir = "fonts"
relative_assets = true
line_comments = false
output_style = :compressed

 

So if you work with Compass, because the source folder (sass_dir) and the destination folder (css_dir) are already defined, you can simply request monitoring of the current folder from the command console

 

compass watch

 

LibSass

 

002-Sass-002-4.png

If you do not want to install Sass under Ruby, you can use LibSass, which is a library developed in C / C ++ and you can use the environment of your choice through a wrapper.

 

There are a large number of ready-to-use wrappers Ruby, Perl, PHP, Python, .NET, Java, JavaScript. But you can also develop a custom wrapper in order to implement your needs to the best of your ability, using libsass directly.

 

Due to the large number of wrappers available, we will not discuss here their installations or their uses. However, be aware that this library is used by code editors like brackets-sass.

 

Pay attention because notepad ++ only code coloring the scss syntax, and Dreamweaver is directly based under Ruby.

 

However, for each of the previous implementations, note that the ad hoc github offers you a topic, Getting Started, which allows you to quickly take charge of setting up the compiler of your choice.

 

Using PHP

 

Although this comes out of the Node approach, it is possible to opt for an alternative that consists of not generating the client side compilation.

 

One places, therefore, directly the entire necessary source files on the server, which will compile them on demand when the pages are distributed.

 

Several possibilities:

 

scssphp

 

To implement this type of use, and workflow, we will only address the approach made by scssphp.

 

First step, download the necessary files, and unpack the archive.

 

Among the recovered files, only the file scss.inc.php will be useful for this test.

 

Let us start by creating the base-1.php file that will contain the HTML structure. For this, two simple paragraphs of 'lorem ipsum' will do the trick. Let us add a class to each, respectively styles-tags and styles-link.

 

base-1.php

 

!doctype html>        

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quidem nulla nam dolorem nobis impedit harum autem, odio praesentium qui iusto perspiciatis. Animi ex atque tenetur accusamus numquam earum quas.

    

Repellendus voluptatibus praesentium, quaerat doloremque, non placeat. Assumenda facilis sint repellendus similique porro nihil quae explicabo eius, distinctio ea expedita, rerum sed nulla, tempora ut maiores a corporis minus deserunt.

 

There are various ways to use the compiler; we will approach two of them.

 

For the first one, we will compile CSS directly within the <script> tag of the page, the second will be to link, in a classic way, an external style sheet through a <link>.

 

styles-tags.php

 

  Let us put a <script> tag and quite simply, lets a PHP file that will compile the SCSS and return from the CSS

.

 

Then, just write PHP, you cannot do more classic.

 

compile('      $coul: blue;      .test-tags {         color: $coul;      }   '); ?>

 

  1. Import the previously downloaded file,
  2. We need to create an instance of the scssc class, which will allow us to compile the scss into css,
  3. Finally, through a simple echo instruction, we write the result of the compilation. Certainly, this compilation is very basic but it allows, by using a variable, to verify that everything works well.

 

styles-link.php

 

For this option, we will use a <link> tag, which we usually use to link CSS files.

 

This time, we will have to compile, on the fly, scss to css and the compilation being server side, we will have to create the CSS style sheet in PHP.

 

<link rel="stylesheet" href="styles-link.php">

 

On the PHP side, the source file will resemble the one used previously, except that the browser must interpret the PHP document as CSS. We must take care to modify the header of the file before compiling and returning it.

 

< ?php   header("Content-Type: text/css");   require "scss.inc.php";   $scss = new scssc();   echo $scss->compile('       $couleur: orange;       .test-link {           color: $couleur;       }   '); ?>

 

Go further

 

For more information on using this compilation method, please refer to the online documentation.

 

Grunt, Gulp or NPM

 

002-Sass-002-5.png

 

In our projects, we often use task automation to optimize certain mechanics such as concatenation, image optimization, sprite generation, file minimization, and many others potential.

We can therefore also entrust these compilers with the task of compilation. Whether we use Gulp, Grunt, NPM or directly Node, solutions are not missing.

There is even a parser SCSS for PostCSS.

In order not to deviate too far from the objective of this article, I propose that you bring us closer to a next series of articles concerning the task automation machines and, therefore, not to address their use in this this present article.

 

Visual applications

 

002-Sass-002-6.png

 

Finally, for the most recalcitrant of us to the code, there are solutions embedded in application form, which can sometimes be more transparent of use.

Thus we find Koala, Scout, CodeKit, LiveReload, Hammer, Prepros, Compass.app, Crunch… which offer user-friendly, intuitive interfaces, to quickly include some libraries, and compile a source folder to an output folder.

Of course, their extensibility is sometimes reduced, but in some cases, it can be a more flexible solution than to go through command lines.

Attention also to the maintenance of the application in time, some solutions can disappear as quickly as they have appeared, or often no longer be maintained.

 

Sometimes, even if they are based on LibSass, they can simply not keep up with developments as quickly as those that are directly available under Sass.