Introduction à Sass et au SCSS

Qu’est-ce que Sass ?

Sass est le sigle de Syntatically Awesome Stylesheets. C’est un préprocesseur CSS.

L’objectif d’un préprocesseur CSS est de générer dynamiquement des fichiers CSS pour un site web. Cette génération dynamique permet de simplifier l’écriture du CSS et d’offrir de nombreuses possibilités nouvelles aux développeurs.

Sass permet de créer des variables, des règles encapsulées, des mixins, des fonctions et même d’utiliser des opérations mathématiques. Grâce à cet outil, les développeurs écrivent des fichiers CSS plus lisibles, plus performants et plus facilement maintenable.

De plus la transition est très simple : Sass est parfaitement compatible avec le code et la syntaxe CSS, ce qui permet à quiconque à l’habitude du CSS classique d’adopter Sass à son rythme.

Chaque fichier CSS étant aussi un fichier Sass, il vous suffit de déplacer le contenu de vos fichiers .css dans des fichiers Sass et tout devrait se comporter comme avant !

Il existe deux types de syntaxes acceptées par le préprocesseur Sass :

1. SASS : Les fichiers ayant l’extension .sass permettent d’écrire du CSS sans se soucier des points-virgules et des accolades : l’indentation suffit à déterminer quelles règles s’appliquent à un sélecteur donné.

   .div
   	margin: 10px
   	font-size: 14px
   	border-radius: 5px
   	border: 1px solid black
   

2. SCSS: Les fichiers ayant l’extension .scss permettent d’écrire du CSS avec les règles habituelles de celui-ci : les déclarations sont séparées par un point-virgule et chaque set de règle est écrit entre accolades.

   .div {
   	margin: 10px;
   	font-size: 14px;
   	border-radius: 5px;
   	border: 1px solid black;
   }
   

Le choix est à la discrétion de chacun, pour cet article (et en général chez CodeBuds), nous allons utiliser la syntaxe SCSS.

L’avantage de Sass est que bien que nous écrivions notre code dans un fichier .scss celui-ci sera converti en fichier CSS par la suite, les navigateurs n’auront donc à traiter qu’avec des fichiers CSS.

Faisons maintenant un petit tour des techniques utilisables grâce à Sass.

Les variables

Sass nous permet de déclarer des variables. C'est l'une des nouveautés qui simplifie la vie des développeurs. Il est possible de créer des variables pour différentes couleurs ou tailles de police par exemple, et de les utiliser ensuite dans n'importe quel fichier.

Ainsi, si nous voulons changer une couleur partagée par plusieurs éléments, nous n'avons pas besoin d'apporter des modifications dans les blocs CSS de chacun de ces éléments. Il suffit de modifier la couleur de la variable et le changement sera répercuté à tous les endroits où cette variable est utilisée.

Pour déclarer une variable dans Sass, il suffit de débuter le nom de la variable par le signe dollar.

$background-color: #ff0000;
$small-font-size: 12px;
$large-font-size: 18px;

Les commentaires

Sass propose deux façons d'écrire des commentaires.

• Commentaire d'une seule ligne : double barre oblique //.
• Commentaire sur plusieurs lignes : /* */.

Remarque : les commentaires d'une seule ligne ne seront pas ajoutés au fichier CSS final compilé. Seuls les commentaires multi-lignes seront ajoutés au fichier CSS final. Ainsi, si vous avez besoin de voir les commentaires dans un fichier CSS, vous devez l'écrire en utilisant la syntaxe /* */.

Le nesting

Sass simplifie l’utilisation de sélecteurs hiérarchiques. Si pour créer des règles imbriquées votre CSS actuel ressemble à :

footer {
 background-color: black;
}
footer ul {
 list-style: none;
}
footer li {
 float: right;
}
footer li a {
 padding: 3px;
 color: blue;
 font-size: 12px;
 text-decoration: none;
}

Grâce à Sass vous pourrez l’écrire comme suit :

footer {
 background-color: black;
 ul {
  list-style: none;
 }
 li {
  float: right;
  a {
    padding: 3px;
    color: blue;
    font-size: 12px;
    text-decoration: none;
  }
 }
}

Ainsi, comme le montre le CSS ci-dessus, l'imbrication nous permet de regrouper du code et de le hiérarchiser via son indentation, ce qui le rend plus facile à modifier et à maintenir et évite également de taper des caractères supplémentaires.

Les sélecteurs parents

Le sélecteur parent est un sélecteur spécial utilisé dans les sélecteurs imbriqués pour faire référence au sélecteur extérieur.

Si nous avons le CSS suivant :

a:link, a:visited {
 text-decoration: none;
 padding: 5px;
 color: #fff;
}
a:hover {
 background: #6c6e62;
}

Nous pouvons le réécrire comme ceci :

a {
 &:link, &:visited {
  text-decoration: none;
  padding: 5px;
	color: #fff;
 }
 &:hover {
  background: #6c6e62;
 }
}

Ainsi, le symbole & fera référence au parent qui est une balise d'ancrage <a /> dans cet exemple.

L'utilisation du sélecteur parent évite une saisie supplémentaire.

Extends

Si nous disposons d'un bloc CSS déjà défini que nous devons appliquer à un autre élément, nous pouvons utiliser le sélecteur @extend pour inclure le CSS précédemment défini sans avoir besoin de le dupliquer.

Dans cet exemple, les éléments ayant pour classes about, home ou help vont se voir appliquer les mêmes règles que celles définies pour la classe nav-button.

.nav-button {
 padding: 10px;
 border: 1px solid #ccc;
 background: #777;
 color: #fff;
 letter-spacing: 1px;
 cursor: pointer;
}
.home{
 @extend .nav-button;
 font-weight: bold;
}
.about {
 @extend .nav-button;
}
.help {
 @extend .nav-button;
}

Encore une fois, l’utilisation Sass limite la duplication de code et facilite le développement et la maintenance future.

Les placeholders

L’utilisation d’Extends limite la duplication de code, cependant elle peut encore être optimisée. En effet, voici le résultat de la compilation du bloc Sass précédent en CSS :

.nav-button, .home, .about, .help {
  padding: 10px;
  border: 1px solid #ccc;
  background: #777;
  color: #fff;
  letter-spacing: 1px;
  cursor: pointer;
}
.home {
  font-weight: bold;
}

Comme vous pouvez le voir dans le fichier CSS compilé, il existe un sélecteur .nav-button, même si nous n'en avons pas l’utilité dans le code HTML. Nous l’avions simplement défini dans un fichier SCSS afin de pouvoir étendre ses propriétés.

Il n'est donc pas nécessaire d'ajouter la classe .menu-button dans le CSS final, car elle est redondante. Elle alourdit alors notre fichier sans raison ce qui a un impact sur les performances du site web.

Les placeholders sont une façon d’écrire des règles CSS de manière que le préprocesseur ne compile que ce qui est réellement utilisé.

En utilisant la syntaxe des placeholders, qui est indiquée par le signe %, nous pouvons supprimer ce code redondant du fichier CSS final.

Le fichier SCSS suivant :

%nav-button {
 padding: 10px;
 border: 1px solid #ccc;
 background: #777;
 color: #fff;
 letter-spacing: 1px;
 cursor: pointer;
}
.home{
 @extend .nav-button;
 font-weight: bold;
}
.about {
 @extend .nav-button;
}
.help {
 @extend .nav-button;
}

Sera donc compilé en ce fichier CSS :

.home, .about, .help {
  padding: 10px;
  border: 1px solid #ccc;
  background: #777;
  color: #fff;
  letter-spacing: 1px;
  cursor: pointer;
}
.home {
  font-weight: bold;
}

Les mixins

Le sélecteur @mixin est similaire à @extend, sauf que le sélecteur @mixin permet d’utiliser des paramètres.

Un mixin se déclare à l'aide de @mixin et s’utilise à l'aide de @include.

Certains besoins sont un peu fastidieux à écrire en CSS, surtout avec CSS3 et les nombreux préfixes vendeurs qui existent.

Un mixin vous permet de créer des groupes de déclarations CSS que vous pourrez réutiliser sur l'ensemble de votre site. Vous pouvez même y transmettre des variables pour rendre votre mixin plus flexible.

Une mixin peut justement être utilisée pour grouper plusieurs préfixes vendeurs :

@mixin brdradius($topl: 5px, $topr: 5px, $bottomr: 5px, $bottoml: 5px) {
  border-radius: $topl $topr $bottomr $bottoml;
  -moz-border-radius: $topl $topr $bottomr $bottoml;
  -webkit-border-radius: $topl $topr $bottomr $bottoml;
}
%cssdiv {
  width: 80px;
  padding: 10px;
  text-align: center;
  border: 1px solid #ccc;
  margin: 10px;
}
.first-div {
  @extend %cssdiv;
  @include brdradius;
}
.second-div {
  @extend %cssdiv;
  @include brdradius(10px, 10px, 10px, 10px);
}

Dans cet exemple, nous avons deux divs. Pour la première div, nous n'avons pas transmis de valeur à la mixine brdradius lors de l'utilisation d'include, elle est alors définie grâce à ses paramètres par défaut et est donc de 5px.

En revanche, la seconde div a un rayon de bordure de 10px que nous avons explicitement transmis.

Un point essentiel à noter concernant les différences entre extend et mixin est que bien que nous puissions déclarer un mixin sans accepter de paramètre, et donc proposer un comportement équivalent à extends, le code CSS final généré par l'utilisation du mixin sera plus lourd que si l’on avait utilisé un extend.

En effet, un mixin va dupliquer le code CSS dans chaque classe l’incluant, ce qui peut rendre le fichier CSS final bien plus volumineux !

Par conséquent, vous devez utiliser le mixin uniquement s'il prend différentes valeurs de paramètres et que vous allez inclure ce mixin à de nombreux endroits.

Si le mixin n'est utilisé qu'à un seul endroit dans le fichier SCSS et qu'il n'utilise aucun paramètre, il est préférable d'utiliser extend qui diminuera la taille du fichier CSS final.

Les partials

Les partials jouent un rôle important dans Sass. Ils permettent de créer des fichiers .scss distincts et de les importer dans un autre fichier, ce qui facilite la gestion du code CSS associé.

Pour déclarer un fichier comme fichier partiel, nous devons faire commencer le nom du fichier par le symbole de soulignement tiret bas : _ et l'ajouter dans un autre fichier à l'aide de la syntaxe @import sans mentionner ni le symbole, ni l'extension du fichier.

Par exemple, nous pouvons créer _buttons.scss, _base.scss, _variables.scss, et les inclure tous dans le fichier SCSS principal.

Pour importer _buttons.scss depuis le dossier “buttons”, nous utilisons @import 'buttons/buttons';

Pour importer _base.scss, nous utilisons @import 'base' ;

C’est une pratique rependue que de créer un fichier SCSS principal qui servira à importer tous nos fichiers partiels.

// main.scss

@import 'variables';
@import 'base';
@import 'buttons';

L'ordre d'importation a un impact ici. Si _buttons.scss utilise des variables déclarées dans _variables.scss, il doit être importé avant _buttons.scss, comme indiqué dans le fichier main.scss ci-dessus.

La différence entre @import de Sass et une instruction d'importation CSS normale est que @import de Sass n'effectue pas de requêtes HTTP supplémentaires pour chaque fichier SCSS importé. Au lieu de cela, il ajoute le contenu des fichiers partiels dans un seul fichier lors de la compilation du code.

Les opérateurs et les fonctions

Sass prend en charge les opérateurs mathématiques tels que *+, -, , / et ***%***, que nous pouvons utiliser dans notre code SCSS. Il fournit également une fonction calc que nous pouvons utiliser pour calculer n'importe quelle valeur.

div { 
  width: calc(200px / 2) 
}

La largeur du bouton sera ainsi de 100px.

Il existe également une fonction lighten très utilisée qui permet d'éclaircir une couleur d'un certain pourcentage. Par exemple, lorsque nous passons la souris sur un bouton ou un lien.

Sass dispose également d'une fonction darken pour rendre la couleur foncée au lieu de claire.

$background-color: #777;
a {
  ...
  background-color: $background-color;
  ...
  &:hover {
    background-color: lighten($background-color, 20%);
  }
}

Les fonctions rendent Sass plus puissant. Si nous voulons construire un menu, nous pouvons facilement le faire en utilisant les variables et les fonctions de Sass.

$page-width: 1000px;
$tabs-count: 5;
$tab-width: round($page-width / $tabs-count);

.menu-link {
  font-size: 20px;
  display: inline-block;
  width: $tab-width;
  border: 1px solid #ccc;
  text-transform: uppercase;
  padding: 10px;
  text-align: center;
  cursor: pointer;
}

Ainsi, si nous devons ajouter un autre onglet à notre menu à l'avenir, il nous suffit d'incrémenter la valeur $tabs-count et la largeur de chaque menu sera ajustée automatiquement.

Et après ?

Nous avons fait le tour des fonctionnalités principales de Sass.

Pour synthétiser, Sass permet d’écrire du code CSS classique tout en offrant des outils puissants qui simplifient le travail des développeurs, de la conception initiale à la maintenance future tout au long de la vie du projet.

Le passage de CSS à Sass est facile car il est possible de mélanger les syntaxes, ce qui permet à tous de transitionner à son rythme, y compris sur du legacy code !

La compilation des fichiers CSS améliore les performances du site web en allégeant ces derniers, effet qui est améliorable grâce à l’utilisation éventuelle d’un minifieur de code (Sass propose cette option à la compilation).

Si vous voulez aller plus loin, vous pouvez enchaîner avec notre article “tutoriel” pour vous aider à configurer Sass sur vos projets !