Sass avec Extend et Mixin, méthodes et impacts

Si vous êtes intéressé par Sass, je vous invite également à lire « Web Style Guide » avec Sass.

Si vous développez avec Sass, vous utilisez possiblement certaines des techniques qu’offrent ce langage. Peu importe votre approche, la technique que vous utilisez peut avoir un effet sur le fichier qui sera compilé (et ultimement, un effet sur la performance). Je vous propose donc d’analyser ces techniques pour la déclaration de styles afin de voir les impacts une fois compilé.

Techniques du langage Sass

Méthode directe

Dans la méthode directe, on écrit les styles comme on le ferait sans pré-processeur (on peut cependant utiliser des variables si on le souhaite).

// Sass
.rule-1 {
    color: $black;
}

.rule-2 {
    border: 1px;
    color: $black;
}

.rule-3 {
    border: 1px;
    color: $black;
    font-size: 1rem;
}

// CSS compilé
.rule-1 {
  color: #000; }

.rule-2 {
  border: 1px;
  color: #000; }

.rule-3 {
  border: 1px;
  color: #000;
  font-size: 1rem; }

// Résultat : 3 règles et 3 sélecteurs

Au niveau CSS, cette méthode retourne autant de sélecteurs que de règles.

Héritage avec Sass @extend

La méthode des @extend permet de créer des utilitaires afin de les récupérer plus tard.

// Sass
.helper-1 {
    color: #000;
}

.helper-2 {
    border: 1px;
}

.helper-3 {
    font-size: 1rem;
}

.rule-1 {
    @extend .helper-1;
}

.rule-2 {
    @extend .helper-1, .helper-2;
}

.rule-3 {
    @extend .helper-1, .helper-2, .helper-3;

}

// CSS compilé
.helper-1, .rule-1, .rule-2, .rule-3 {
  color: #000; }

.helper-2, .rule-2, .rule-3 {
  border: 1px; }

.helper-3, .rule-3 {
  font-size: 1rem; }

// Résultat : 3 règles et 8 sélecteurs

Au niveau CSS, cette méthode retourne plus du double de sélecteurs que de règles.

Sass %placeholder

Similaire à la méthode précédente, les %placeholder ne sont cependant pas compilés individuellement.

// Sass
%helper-1 {
    color: #000;
}

%helper-2 {
    border: 1px;
}

%helper-3 {
    font-size: 1rem;
}

.rule-1 {
    @extend %helper-1;
}

.rule-2 {
    @extend %helper-1, %helper-2;
}

.rule-3 {
    @extend %helper-1, %helper-2, %helper-3;
}

// CSS compilé
.rule-1, .rule-2, .rule-3 {
  color: #000; }

.rule-2, .rule-3 {
  border: 1px; }

.rule-3 {
  font-size: 1rem; }

// Résultat : 3 règles et 6 sélecteurs

Au niveau CSS, on ne voit jamais les %placeholder compilés individuellement. Cette méthode retourne deux fois plus de sélecteurs que de règles.

Sass @mixin

Les @mixin servent généralement à créer des recettes complexes pouvant accepter des valeurs (un peu à la manière de fonctions JavaScript). Certains pensent qu’un @mixin doit obligatoirement accepter une valeur pour être utile mais aucune règle officielle existe pour appuyer ceci.

// Sass
@mixin helper-1() {
    color: #000;
}

@mixin helper-2() {
    border: 1px;
}

@mixin helper-3() {
    font-size: 1rem;
}

.rule-1 {
    @include helper-1();
}

.rule-2 {
    @include helper-1();
    @include helper-2();
}

.rule-3 {
    @include helper-1();
    @include helper-2();
    @include helper-3();
}

// CSS compilé
.rule-1 {
  color: #000; }

.rule-2 {
  color: #000;
  border: 1px; }

.rule-3 {
  color: #000;
  border: 1px;
  font-size: 1rem; }

// Résultat : 3 règles et 3 sélecteurs

Au niveau CSS, cette méthode retourne autant de sélecteurs que de règles, comme dans la méthode directe. Cependant, cette méthode permet de récupérer les `mixins` alors que la méthode directe exige de dupliquer vos déclarations.

L’importance du nombre de sélecteurs CSS

La technique de base Sass que vous voudrez mettre en place pourrait être influencée selon la grosseur du projet, sa durée de vie et les besoins de maintenances futurs. J’ai été un adepte des @extends assez longtemps, jusqu’au jour ou j’ai été confronté à un assez grand projet déjà en place, devant supporter Internet Explorer 9. Avec plus de 21 000 sélecteurs, j’ai dû chercher la cause de l’affichage inadéquat sur les nouvelles pages créés. Finalement, j’ai réalisé que IE9 est limité à 4 095 sélecteurs CSS… Et oui! Aujourd’hui, les navigateurs modernes acceptent beaucoup plus de sélecteurs CSS mais c’est peut-être inutile de surcharger pour rien. À vous de voir.

Si vous avez besoin d’aide pour mettre en place une méthodologie adéquate pour vos projets utilisant Sass, n’hésitez pas à communiquer avec nous.