Sass – The compilation and tools available

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.

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

Under Ruby

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 dossiersources/sass:dossierdestination/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

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.

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, complete and embedded SCSS 3.2.12
• php-sass, also complete and based on the same scss distribution
• phamIp, older and has not been updated in recent years

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>
<html>
    <head>
        <meta charset="utf-8">
        <title>Document sans titre</title>
    </head>
    <body>
        <p class="test-tags">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.</p>
        <p class="test-link">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.</p>
    </body>
</html>

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

<script>         
   < ?php
      require "styles-tags.php";
   ?>
</script>

<?php
    require "scss.inc.php";
    $scss = new scssc();
    echo $scss->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">

< ?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 ou NPM

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

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.