SASS

SASS est conçu pour rendre le développement CSS plus structuré et dynamique. Il existe sous deux syntaxes principales :

• .scss : syntaxe proche de CSS classique avec des accolades et des points-virgules.
• .sass : syntaxe plus concise utilisant l’indentation, sans accolades ni points-virgules.

SASS est largement utilisé avec des frameworks modernes ou des projets front-end complexes, et il est compatible avec tous les navigateurs après compilation en CSS classique.

Installation

Pour utiliser SASS, il faut avoir Node.js installé. Ensuite, installez SASS globalement :

1npm install -g sass

Pour compiler un fichier SASS (.scss) en CSS :

1sass style.scss style.css

Pour surveiller les modifications automatiquement :

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

Exemple de base avec variables

1$primary-color: #3498db;
2$font-stack: Arial, sans-serif;
3 
4body {
5  font-family: $font-stack;
6  color: $primary-color;
7}

Les variables permettent de centraliser les valeurs et de les réutiliser facilement.

Imbrication (Nesting)

SASS permet d’imbrquer les sélecteurs pour refléter la hiérarchie HTML :

 1nav {
 2  background-color: #333;
 3 
 4  ul {
 5    list-style: none;
 6 
 7    li {
 8      display: inline-block;
 9      margin-right: 20px;
10 
11      a {
12        color: white;
13        text-decoration: none;
14 
15        &:hover {
16          color: #f39c12;
17        }
18      }
19    }
20  }
21}

Mixins et fonctions

Les mixins permettent de réutiliser des blocs de styles :

 1@mixin border-radius($radius) {
 2  -webkit-border-radius: $radius;
 3  -moz-border-radius: $radius;
 4  border-radius: $radius;
 5}
 6 
 7.button {
 8  @include border-radius(10px);
 9  background-color: #3498db;
10  color: white;
11  padding: 10px 20px;
12}

Les fonctions permettent de calculer des valeurs dynamiques :

1@function double($value) {
2  @return $value * 2;
3}
4 
5.box {
6  width: double(50px); // 100px
7}

Importation de fichiers

SASS facilite la modularisation avec @use et @import :

1// _variables.scss
2$primary-color: #3498db;
3 
4// style.scss
5@use 'variables';
6 
7body {
8  color: variables.$primary-color;
9}

Bonnes pratiques

• Organiser les fichiers SASS en modules (_variables.scss, _mixins.scss, _layout.scss).
• Utiliser des variables et mixins pour centraliser les styles réutilisables.
• Exploiter l’imbrication avec parcimonie pour éviter un CSS trop spécifique.
• Compiler toujours le SASS en CSS standard avant de le déployer.
• Utiliser des préprocesseurs modernes comme Dart SASS, recommandé par la communauté.

SASS est un outil puissant pour améliorer l’efficacité et la maintenabilité du CSS. Il permet de gérer des projets front-end complexes avec des styles modulaires, réutilisables et faciles à maintenir, tout en restant compatible avec tous les navigateurs après compilation.