3 raisons d'aimer SCSS

SASS/SCSS est un pré-processeur de CSS qui apporte à vos feuilles de style un lot de fonctionnalités destinées à vous faciliter la vie et à alléger votre code. Le slogan de SASS, "CSS with superpowers", n'est pas usurpé : depuis que j'ai découvert cet outil il y a 3 ans avec mes premiers tests de Ruby on Rails, c'est bien simple, je l'ai utilisé sur strictement tous mes projets web ! Voici les 3 raisons parmi tant d'autres qui m'ont rendu accro à cet outil.

Terminologie : Sass est le nom du projet (acronyme pour Syntactically Awesome StyleSheets). Il supporte 2 syntaxes différentes, la syntaxe Sass basée sur l'indentation du code, et la syntaxe SCSS qui reprend la même syntaxe que CSS, avec des blocs définis par accolades et des points-virgules en fin des lignes. C'est cette syntaxe que j'utilise dans les blocs de code de cet article


#1 : Une meilleure lisibilité avec le code imbriqué

Jusqu'à présent, en CSS, vous deviez définir un bloc d'accolades pour chaque cible que vous souhaitiez styliser. Autant dire qu'en fonction du DOM, ça pouvait vite devenir lourd :

1
2
3
4
5
6
7
8
9
10
11
/* --- Avant --- */

table { border-collapse:collapse; }
table thead { 
    font-weight: bold; 
    text-transform: uppercase;
}
table tbody td     { font-size: 1rem; }
table tbody td.wow { background-color: #6D809E; }

/* --- ... mais ça, c'était avant --- */

Avec SASS/SCSS, vous pouvez imbriquer vos blocs de code. Pour moi, cette fonctionnalité est très vite devenue absolument nécessaire : on gagne une lisibilité incroyable, c'est un pur plaisir !

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// --- Avec SCSS ---

$mutedBlue: #6D809E;

table {
    border-collapse: collapse;
    
    thead {
        font-weight: bold;
        text-transform: uppercase;
    }
    
    tbody {
        td {
            font-size: 1rem;
            
            // & référence le sélecteur courant, par exemple pour lui adjoindre
            // une classe ou une pseudo-classe.
            // Ici, on décrut ainsi "table tbody td.wow" :
            &.wow {
                background-color: $mutedBlue;
            }
        }   
    }
}

Raison 2 : Keep your code DRY !

DRY : Don't Repeat Yourself. SASS fournit de nombreuses fonctionnalités pour vous éviter la duplication de code, le rendant par là même plus facile à maintenir et à faire évoluer.

Variables

Hé oui ! Sass vous donne (enfin !) la possibilité de définir des variables dans votre code CSS. Plus besoin de parcourir votre CSS de 1200 lignes pour modifier les 45 occurrences du code hexadécimal de cette fichue couleur bleue… Je suis sûr que vous voyez le gain de temps incroyable que va vous permettre cette simple fonctionnalité !

1
2
3
4
5
6
/* --- Avant --- */

header { background-color:#0B57A3; }
a { color:#0B57A3; }

/* --- ... mais ça, c'était avant --- */
1
2
3
4
5
6
// --- Avec SCSS ---

$darkBlue: #0B57A3;

header { background-color: $darkBlue; }
a      { color: $darkBlue; }

Mixins

Les mixins reprennent le concept de variable, mais à plus grande échelle : ici, on ne se contente plus de réutiliser une simple valeur, mais un ensemble d'attributs CSS. Il faut voir les mixins comme une fonction/méthode en programmation, c'est-à-dire une portion de code réutilisable et éventuellement paramétrable. Une utilisation typique concerne les propriétés CSS3 : pour assurer une compatibilité maximale avec les navigateurs du marché, nous sommes en effet obligés d'utiliser ce genre de syntaxe :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* --- Avant --- */

p.info {
  -webkit-border-radius: 6px; 
     -moz-border-radius: 6px; 
      -op-border-radius: 6px;
          border-radius: 6px; 
}
span.tag {
  -webkit-border-radius: 2px; 
     -moz-border-radius: 2px; 
      -op-border-radius: 2px;
          border-radius: 2px; 
}

/* --- ... mais ça, c'était avant --- */

Syntaxe qui implique une forte duplication de votre code, et donc des feuilles de style plus longues et moins lisible. Avec SASS, vous pouvez définir un mixin border-radius, et le réutiliser quand bon vous semble :

1
2
3
4
5
6
7
8
9
10
11
12
13
// --- Avec SCSS ---

// 1. Définition du mixin
@mixin border-radius($rayon) {
  -webkit-border-radius: $rayon; 
     -moz-border-radius: $rayon; 
      -op-border-radius: $rayon;
          border-radius: $rayon;
}

// 2. Réutilisation
p.info   { @include border-radius(6px); }
span.tag { @include border-radius(2px); }

#3 : Modularisons

Enfin, un des derniers gros points forts de Sass est de permettre simplement une modularisation de votre code CSS. Jusqu'à aujourd'hui, vous aviez 2 façons de faire :

  1. Utiliser un unique fichier CSS monolithique contenant tout votre code,
  2. Ou séparer votre code en plusieurs fichiers CSS pour une meilleure organisation logique… mais en contrepartie, vous deviez dans le <head> de vos pages importer les différents fichiers.

Avec Sass, vous avez le meilleur des 2 mondes. En effet, Sass permet d'importer un autre fichier avec la syntaxe suivante :

1
2
// Sass va chercher à importer "variables.scss" ou "_variables.scss"
@import "variables";

Comme vous le voyez dans ce petit extrait de code, @import "variables"; permet d'importer dans votre fichier courant variables.scss ou _variables.scss. Vous n'avez pas manqué de remarquer que j'ai souligné la différence entre les deux, et que ce n'est sûrement pas pour rien. Bien vu !

Partials

Par défaut, Sass compile tous les fichiers .sass/.scss de votre répertoire style en son résultat .css. Sauf, sauf… sauf dans le cas des fichiers préfixés d'un underscore, fichiers que l'on qualifie alors de "partials", et qui ne sont pas compilés.

Typiquement, j'ai pour chacun de mes projets un fichier _variables.scss et _mixins.scss, que j'importe dans ma feuille de style principale (et que je réutilise généralement de projet en projet). Cela me permet de conserver un code clairement organisé en différents modules, mais une fois les SCSS compilées, je n'ai en sortie qu'un unique fichier style.css à importer dans le <head> de mes pages.

1
2
3
4
5
6
7
8
9
10
$ tree public/stylesheets/
.
├── normalize.css
├── sass
│   ├── _mixins.scss
│   ├── _variables.scss
│   └── style.scss
└── style.css

1 directory, 5 files

Comme vous le voyez, Sass offre de nombreuses fonctionnalités qui peuvent grandement vous faciliter la vie. Pour ma part, j'ai été conquis dès sa première utilisation, et je l'utilise pour tous mes projets, que ce soit Rails, Sinatra, MiddleMan, ou PHP. Si vous passez beaucoup de temps à travailler avec du CSS, je vous conseille grandement d'y jeter un œil… d'autant que, vous vous en doutez, je n'ai fait que vous donner un rapide aperçu de tout ce que cet excellente librairie vous permet !