Domptez vos CSS avec SASS

Saas - préprocesseur CSSSASS est un préprocesseur CSS écrit en Ruby. Un préprocesseur CSS étend les fonctionnalités du langage CSS en permettant d’utiliser des variables, des fonctions, des opérations et bien d’autres fonctionnalités lors de la création de feuilles de styles.

Sommaire

  1. Principe de fonctionnement
  2. Installer et utiliser SASS
  3. Le langage SASS
    1. Les règles imbriquées
    2. Les variables
    3. Les sélecteurs
    4. Les mixins
    5. L’héritage
    6. L’Importation un fichier
  4. Bonnes pratiques

Principe de fonctionnement

Le préprocesseur CSS est une brique qui se positionne au début de la chaine de production des feuilles de styles. Les développeurs écrivent leur règles CSS dans un fichier .scss (avec la syntaxe SASS et lance une « compilation » pour générer leurs feuilles de styles en pure CSS interprétable par n’importe quel navigateur.

Si le procéder peut paraître lourd à l’usage, il n’en n’est rien. SASS met à disposition de nombreux outils permettant de simplifier la vie des développeurs. De plus, le gain de productivité et de maintenabilité qu’il est possible d’obtenir vaut bien les quelques étapes supplémentaires nécessaires à la production de feuilles de styles.

Installer et utiliser SASS

Comme indiqué plus haut, dans un projet SASS, les développeurs n’écrivent plus directement de css, ils produisent du SCSS. Pas de panique, il n’y a pour ainsi dire pas de différences avec le CSS. Il s’agit plutôt de nouvelles règles qui enrichissent CSS. La courbe d’apprentissage est pour ainsi dire, très rapide.

Pour installer SASS, il suffit de lancer la commande suivante dans votre terminal ou l’invite de commande sur Windows. (je suppose que vous avez Ruby d’installer sur votre système, prérequis obligatoire pour installer SASS) :

gem install sass

Pour produire des fichiers CSS, il convient de « compiler » les fichiers SCSS. Pour cela SASS fourni un outil permettant d’automatiser la compilation.

Ecrivons un fichier style.scss simple. Ce fichier contient le code suivant :

.contenu {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;

    h1 {
        font-size: 18px;
    }
}

Ne nous attardons pas sur le contenu de ce fichier, nous y reviendrons plus tard. Nous allons maintenant générer la feuille de style CSS à partir du fichier style.scss

sass style.scss:style.css

Chaque fois que le fichier SCSS sera modifié, il faudra lancer cette commande pour prendre en compte les modifications dans le fichier CSS. Pour éviter cette étape fastidieuse, il est possible d’utiliser la commande suivante :

sass --watch style.scss:style.css

Cette commande à pour effet de transformer le fichier scss en fichier css mais pas seulement. Désormais le fichier scss est sous surveillance. Dès que le fichier styles.scss est modifié, le fichier styles.css est automatiquement généré. C’est très bien pour un fichier, mais dans un projet, il y a bien souvent plusieurs feuilles de styles. Si il faut lancer la commande pour chaque fichier cela va vite devenir très contraignant. Heureusement, ce cas de figure a été prévu. Il est ainsi possible de surveiller un répertoire et pas seulement un fichier. Pour cela, il suffit de lance la commande suivante :

sass --watch styles/scss:styles/css

Ainsi, SASS surveille les fichiers scss présents dans le répertoire « styles/scss » et génère les fichiers css dans le répertoire « styles/css ». Dans cette situation, le nom des fichiers scss deviennent le nom des fichiers css.

Avec le temps, vos feuilles de styles s’enrichissent, grossisent et il peut devenir difficile de savoir où une règle css est déclarée. SASS peut préciser dans le fichier css généré à quelle ligne et dans quel fichier scss se trouve une règle (pratique pour débugger). Pour cela, il faut ajouter, l’option « -l » dans la ligne de commande. Il ajoutera cette information sous forme de commentaire au dessus de chaque règle.

sass --watch style.scss:style.css -l

Il existe également une extension Firefox qui s’intègre à Firebug qui fait le même travail : FireSass.

L’utilisation de SASS devient presque transparente.

Le langage SASS

SASS peut être considéré comme une extension du langage CSS qui apporte de nouvelles fonctionnalités. La syntaxe est aujourd’hui très proche du css.

Les règles imbriquées

Revenons sur notre fichier style.scss écrit plus haut :

.contenu {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;

    h1 {
        font-size: 18px;
    }
}

Dans ce fichier nous déclarons une classe « .contenu » dans laquelle nous définissons la police de caractère que nous souhaitons utiliser et sa taille. Jusque là, aucune différence avec du CSS standard. Nous déclarons ensuite la balise h1, directement dans la classe « .contenu », et nous définissons la taille de sa police via la propriété css font-size. Nous utilisons ici le concept d’imbrication apporté par SASS.

Le ficher css généré ressemblera à ceci :

.contenu {
    font-family: arial, helvetica, sans-serif
    font-size: 12px;
}
.contenu h1 {
    font-size: 18px;
}

Rien de transcendant pour le moment mais on peux pousser le concept plus loin. Exemple :

/* scss */
.contenu {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;

    h1 {
        font-size: 18px;
        .homepage {
            color: blue;
        }
   }
}

/* css */
.contenu {
    font-family: arial, helvetica, sans-serif
    font-size: 12px;
}
.contenu h1 {
    font-size: 18px;
}
.contenu h1 .homepage {
    color: blue;
}

Il devient très facile d’imbriquer les règles avec SASS tout en ayant un code lisible et facilement maintenable. Imaginez par exemple devoir changer le nom de la classe « .contenu » dans un fichier css comprenant de nombreuses règles liées à cette classe. Avec SASS, il suffit de modifier une ligne et lancer une compilation. En css, il faut modifier autant de lignes qu’il y a de règles liées à cette classe. L’imbrication améliore également la lisibilité, il bien plus facile de voir les relations parents / enfants entre les différents sélecteurs.

Les variables

SASS introduit les variables dans les feuilles de styles CSS. Pour utiliser une variable, il faut faire précéder son nom du symbole « $ ».

/* Fichier scss */
/* Définition des variables */
$colorLink: #aa33dd;
$paddingLink: 10px;
$imagePath: "../../img/";

a {
    display: block;
    padding: $paddingLink;
    color: $colorLink;
    background: url($imagePath+'mon-image.png') left top scroll no-repeat;
}

/* Fichier css */
a {
    display: block;
    padding: 10px;
    color: #aa33dd;
    background: url('../../img/mon-image.png') left top scroll no-repeat;
}

Un autre avantage d’utiliser SASS est de repérer les erreurs plus facilement. En effet, lorsque l’on tente de transformer un fichier SCSS, le préprocesseur détecte les erreurs de syntaxe. Par exemple, j’avais fait une erreur dans le script précédent un utilisant l’opérateur =  au lieu de : pour assigner une valeur à une variable. Résultat :

Pour l’erreur d’opérateur :

>>> Sass is watching for changes. Press Ctrl-C to stop.
error styles.scss (Line 3: Invalid CSS after "$colorLink ": expected ":",
was "= #0000FF;")

Un point virgule d’oublier :

>>> Change detected to: F:/seemios/styles.scss
error styles.scss (Line 10: Invalid CSS after "    color": expected ";",
was ": $colorLink;")

Si il ne détecte pas toutes les erreurs, c’est toujours ça de pris.

Astuce : SASS autorise deux types de notation pour les commentaires :

      • Commentaire sur une ligne
        // mon commentaire
      • Commentaire sur plusieurs lignes
        /* Mon commentaire
        sur plusieurs lignes */

Les commentaires sur plusieurs lignes seront repris dans les fichiers css générés tandis que les commentaires sur une ligne seront ignorés.

Les sélecteurs

Nous avons déjà survolé les possibilités d’imbrication de règle avec SASS, il est possible d’aller beaucoup plus loin en utilisant les sélecteurs.

/** SCSS **/
article {
    > h1 { font-size: 1.2em; border-bottom: 1px dashed #ccc; }
    + footer { border-top: 1px dashed #ccc; }
    ~ article { margin-top: 1.5em; }
    * { color: #000; }
}

/** CSS **/
article > h1 { font-size: 1.2em; border-bottom: 1px dashed #ccc; }
article + footer { border-top: 1px dashed #ccc; }
article ~ article { margin-top: 1.5em; }
article * { color: #000; }

Les sélecteurs parents

Le symbole « & » permet de référencer le sélecteur parent.

/** SCSS **/
a {
 color: blue;
 &:hover {
 color: red;
 }
}

/** CSS **/
a { color: blue; }
a:hover {color: red; }

Une autre utilisation possible :

/** SCSS **/
article {
    h1 { border: 1px solid #000; }
    .homepage & {
        h1 {border: 1px solid #f00; }
    }
}

/** CSS **/
article h1 { border: 1px solid #000; }
.homepage article h1 { border: 1px solid #f00; }

Pas convaincu ? Cette fonctionnalité est pourtant très pratique.

Prenons un exemple avec l’utilisation de Modernizr, outil qui permet de détecter les capacités d’un navigateur et qui ajoute, quand une propriété n’est pas supportée, des classes de type no-xxx dans la balise body des pages HTML.

/* SCSS */
h1 {
    background: linear-gradient(#aaa, #eee);
    .no-textshadow & {
       background: #eee;
    }
}

/* CSS **/
h1 { background: linear-gradient(#aaa, #eee);
.no-textshadow h1 { background: #eee; }

Pratique !

Les mixins

Les mixins peuvent être considérés comme des fonctions qui permettrons, entre autre, de générer des lignes de css.

Un mixin se déclare comme ceci :

/* SCSS */
@mixin mon-mixin {
...
}

On peut très rapidement constater à quel point elles sont pratiques avec le code suivant (d’autant plus avec CSS 3 qui est très verbeux).

/* SCSS */
@mixin border-radius {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

article { @include border-radius; }
aside { @include border-radius; }

/* CSS */
article {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
aside {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

Non seulement cela nous évite d’écrire 10 fois la même chose (DRY) mais cela rend le code bien plus facile à maintenir. Il suffit d’intervenir une seule fois au niveau de la mixin, pour mettre à jour l’ensemble des règles qui l’utilise.

Mais peut-on vraiment parler de fonction sans paramètre.

Mixins et paramètres

Les mixins acceptent bien entendu les paramètres. Voici un exemple de déclaration.

/* SCSS */
@mixin ma-mixin($paramA, $paramB) {
    color: $paramA
    background-color: $paramB
}

// Avec des valeurs par défaut sur les paramètres
@mixin ma-mixin($paramA:blue, $paramB:red) {
...
}

Reprenons l’exemple ci-dessus et utilisons les paramètres :

/* SCSS */
@mixin border-radius($radius:5px) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}

article { @include border-radius; }
aside { @include border-radius($radius: 10px); }

/* CSS */
article {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
aside {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

L’héritage

L’héritage de classe permet de limiter le poids de votre css et, comme pour les mixins, d’éviter de se répéter. Meilleurs performances, maintenabilité facilité.Reprenons le thème de l’exemple ci-dessus avec la proriété CSS border-radius.

En CSS non optimisé :

.button {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.icon {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.box {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

En SCSS :

.radius {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.button { @extend .radius; }
.icon { @extend .radius; }
.box { @extend .radius; }

CSS optimisé après compilation SCSS :

.radius, .button, .icon, .box {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

Cela se passe de commentaire.

L’importation de fichier

L’importation de fichier en CSS n’est pas nouveau, il existe déjà la propriété @import qui permet de charger un fichier css à partir d’un autre. SASS revisite et améliore le concept.

En CSS on tapera ceci :

@import url('mon-fichier-css');

En SCSS on oublira volontairement le mot clef url(…)

@import 'mon-fichier.css';

La différence notable est que la ou CSS appel simplement une feuille de styles, SASS récupère le contenu de cette feuillle de style, le compile et l’intègre directement dans le fichier à partir duquel la règle @import a été déclarée.

Exemple :

/* SCSS */

/* fichier layout.scss */
.page { width: 960px; margin: 0 auto; }

/* fichier style.scss */
@import 'layout.css';
.page h1 { font-size: 1.5em; }

/* CSS */
/* layout.css */
.page { width: 960px; margin: 0 auto; }

/* style.css */
.page { width; 960px; margin: 0 auto; }
.page h1 { font-size: 1.5em; }

Chaque fichier est compilé séparément, mais le fichier scss dans lequel les imports sont demandés agrège le contenu des fichiers qu’il importe. Dans l’exemple précédent, on retrouve dans style.css le contenu de layout.css. Cela peut présenter un intéret lors du débuggage  pour analyser les styles générés par chacun des fichier scss.

Astuce : Pour éviter que les fichiers importés soient également compilés dans des fichiers séparés, SASS introduit un notion de partial. Les fichiers scss préfixé par le sympole « _ » (exemple : _layout.scss) ne seront pas compilé séparément. En utilisant cette convention, à partir de n fichier scss, on obtient un seul fichier css agrégé.

SASS vous permet donc de séparer vos feuilles de styles pour mieux organiser votre code. Il agrège automatiquement vos feuilles de styles.

Bonnes pratiques

Faire attention au poids des feuilles de style

Soyez prudent lors de l’utilisation des mixins, il est très facile en 2 règles SCSS de générer 50 lignes de CSS.

Trop d’imbrication tue l’imbrication

Il est très vite tentant de calquer l’imbrication des règles SCSS sur l’imbrication des balises HTML de votre page. Il faut se fixer une limite sans quoi le vos feuilles de styles seront rapidement imbuvables et des gouffres de contre performance. 4 à 5 niveaux d’imbrication maximum paraissent raisonnables. A vous de voir.

Compressez vos feuilles de styles

Le compilateur SASS dispose d’options de compilation vous permettant de générer vos feuilles de styles pour différents environnements. L’option « compressed » est clairement adaptée à la production. Pour l’utiliser, ajouter l’option –style lors de la compilation

sass --watch style.scss:style.css --style compressed

Les valeurs de l’option style sont :

  • nested (par defaut)
  • compact (monoligne)
  • expanded (idéal pour le développement)
  • compressed (production)

Voilà pour ce petit tour d’horizon de SASS, tout n’est pas couvert dans cet article, n’hésitez pas à consulter la documentation officielle.

2 réflexions au sujet de « Domptez vos CSS avec SASS »

  1. Ping : Présentation du préprocesseur CSS SASS par l'exemple

  2. Ping : Prepros est le compagnon de vos projets SASS - Seemios Blog

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


2 + = 7

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>