Sass – La compilation et les outils disponibles

Afin d’obtenir du CSS traditionnel, et que les fichiers Sass soient écrits en Sass ou en SCSS, il faut les compiler. Pour cela nous avons diverses possibilités que nous allons explorer au cour de cet article.

Notez au passage, que lorsque nous sommes en phase d’expérimentation, ou, en mode développement, il est parfois bien pratique d’avoir sous la main un compilateur autonome, et en ligne.

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

Sous Ruby

Ensuite, quel que soit votre environnement, pour installer Sass, cela se passe en ligne de commande, et de la même manière

   gem install sass

Certainement, que sous Mac, il vous faudra user d’un sudo. Mais voilà c’est tout… il n’y a pas besoin de plus d’étapes ni d’installation.

Vous trouverez une vidéo présentant ces installations ; sous Windows Installation et prise en main de Sass et Compass et sous MacOsx Installation de Compass sous Mac OS X.

Une fois installé, et pour tester le bon fonctionnement, rien de plus simple.

Déplacer votre ligne de commande en pointant sur le dossier de travail que vous souhaitez.

Dans ce dossier, créez un fichier test.scss qui contient le fragment de code ci-dessous puis enregistrez le.

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

Depuis la ligne de commande, saisissez l’instruction suivante ;

   sass test.scss styles.css

Une fois validé, le fichier styles.css devrait être généré et contenir du code CSS standard.

Afin de ne pas devoir continuellement lancer l’instruction de compilation, il est préférable de demander à Sass, ou à compass si vous l’avez également installé, de surveiller le dossier de travail en question, et, de compiler à chaque fois que l’on enregistre un quelconque document *.scss.

Pour cela il suffit d’entrer cette commande et de la valider ;

   sass --watch dossiersources/sass:dossierdestination/css

Du coté de Sass, le premier chemin d’accès, dossiersources/sass, correspond à l’emplacement des fichiers sources (.scss ou .sass) et le second chemin dossierdestination/css, spécifiant le dossier de destination des fichiers compilés (.css). Il faut séparer les deux chemins par deux points :

Bien que cela ne soit pas obligatoire, si vous travaillez sous Ruby, l’installation de compass peut être très intéressante, ne serait que pour la gestion des projets, et notamment au travers de son fichier de configuration 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

Donc si vous travaillez avec Compass, du fait que le dossier source (sass_dir) et le dossier de destination (css_dir) sont déjà définis, vous pouvez simplement demander la surveillance du dossier en cours depuis la console de commande

   compass watch

LibSass

Si vous ne souhaitez pas avoir recours à l’installation de Sass sous Ruby, vous pouvez simplement employer LibSass qui est une librairie développée en C/C++ et que vous allez pouvoir utiliser depuis l’environnement de votre choix au travers d’un wrapper.

Faites attention aux éventuels amalgames, car notepadd++ ne fait que colorer la syntaxe scss, et que Dreamweaver se base directement sous Ruby.

Mais pour chacune des implémentations précédentes, notez que le github ad hoc vous propose une rubrique, Getting Started, qui vous permet de prendre en main rapidement la mise en place du compilateur de votre choix.

Sous PHP

Bien que cela sorte de l’approche Node, il est possible d’opter pour une alternative qui consiste à ne pas générer la compilation coté client.

On place, donc, directement l’ensemble des fichiers sources nécessaires sur le serveur, qui les compilera à la demande lors de la distribution des pages.

Plusieurs possibilités :

• scssphp, très complet et qui embarque SCSS 3.2.12
• php-sass, également complet et basé sur la même distribution de scss, mais s’utilise différemment du précédent
• phamIp, plus ancien et n’a pas été mis à jour depuis quelques années

scssphp

Pour mettre en application ce type d’utilisation, et de flux de travail, nous allons uniquement aborder l’approche faites par scssphp.

Première étape, télécharger les fichiers nécessaires, et décompacter l’archive.

Parmi l’ensemble des fichiers récupérés, seul le fichier scss.inc.php nous sera utile pour ce test.

Commençons par créer le fichier base-1.php qui va contenir la structure HTML. Pour cela, deux simples paragraphes de ‘lorem ipsum’ feront l’affaire. Ajoutons une classe à chacun, respectivement styles-tags et 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>

Il existe diverses manières d’employer le compilateur, nous en approcherons deux.

Pour la première, nous allons directement compiler du CSS au sein de la balise <script> de la page, la seconde consistera à lier, de manière classique, une feuille de style externe au travers d’une balise <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. On importe le fichier téléchargé précédemment,
2. Il faut créer une instance de la classe scssc, qui va nous permettre de compiler le scss en css,
3. Et enfin au travers d’une simple instruction echo, on écrit le résultat de la compilation. Certes cette compilation est très basique mais cela permet, en usant d’une variable, de vérifier que tout fonctionne bien.

styles-link.php

Pour cette option, nous allons user d’une balise <link>, qu’habituellement nous employons pour lier des fichiers de type CSS.

Hors, cette fois-ci, nous allons devoir compiler, à la volée, du scss en css et la compilation se faisant coté serveur, il va nous falloir créer la feuille de styles CSS en 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;
        }
    ');
?>

Aller plus loin

Pour en savoir plus sur l’utilisation de ce mode de compilation, n’hésitez pas à consulter la documentation en ligne.

Grunt, Gulp ou NPM

Il arrive fréquemment que, dans nos projets, nous ayons recourt à des automatiseurs de tâches, afin d’optimiser certaines mécaniques comme la concaténation, l’optimisation d’images, la génération de sprites, la minimisation des fichiers, et bien d’autres possibilités.

Nous pouvons, donc, également confier à ces automatiseurs, la tâche de compilation. Que l’on soit plutôt orientés Gulp, Grunt, NPM ou encore directement Node, ce ne sont pas les solutions qui manquent.

Il existe même un parser SCSS pour PostCSS, c’est dire !

Afin de ne pas trop s’éloigner de l’objectif de cet article, je vous propose de nous rapprocher d’une prochaine série d’articles concernant les automatiseurs de tâches, et, de ce fait, de ne pas aborder leur utilisation dans ce présent article.

Applications visuelles

Enfin, pour les plus récalcitrants d’entre nous au code, il existe des solutions embarquées sous forme applicatives, qui peuvent parfois être plus transparentes d’utilisation.

Ainsi nous trouvons Koala, Scout, CodeKit, LiveReload, Hammer, Prepros, Compass.app, Crunch… qui proposent des interfaces conviviales, et intuitives, afin d’inclure rapidement certaines librairies, et de compiler un dossier source vers un dossier de sortie.

Bien sûr, leur extensibilité s’en trouve parfois réduite, mais dans certains cas cela peut être une solution plus souple, que de passer par des lignes de commandes.

Attention également au maintien de l’application dans le temps, certaines solutions peuvent disparaître aussi vite qu’elles sont apparues, ou souvent ne plus être maintenues.

Parfois, même, si celles-ci sont basées sur LibSass, elles peuvent simplement, ne pas suivre les évolutions aussi rapidement, que celles disponibles directement sous Sass.