( بِسْمِ اللَّـهِ الرَّحْمَـٰنِ الرَّحِيمِ )
Initialisation

Journée 8

Le sass

Voici une version réorganisée et mise en forme du contenu de votre document concernant Sass – Support de cours :

Sass – Support de Cours

Sommaire

  1. Présentation
  2. Principe de base
  3. Installation sous VSCode
  4. Utilisation
  5. Aperçu avant et après compilation
  6. Mise en œuvre : écriture imbriquée et non imbriquée
  7. Utilisation des variables en SCSS
  8. Utilisation des mixins en SCSS
  9. Création de composants et utilisation des feuilles partielles

1. Présentation

Sass (Syntactically Awesome StyleSheets) est un préprocesseur CSS qui ajoute des fonctionnalités avancées au CSS classique. Il permet de :

  • Simplifier la gestion des feuilles de style.
  • Rendre le code plus modulaire, lisible et maintenable.
  • Automatiser certaines tâches répétitives grâce à des outils comme les variables, les mixins ou les imbrications.

En informatique, un préprocesseur traite ses données d’entrée pour produire une sortie utilisée par un autre programme.

2. Principe de base

L’une des principales caractéristiques de Sass est l’imbrication des règles. Ce principe permet :

  • Une écriture plus rapide et intuitive.
  • Une organisation logique et structurée du code.
  • La création de bibliothèques de composants réutilisables.

Exemple :

Écriture imbriquée en SCSS

scss
body {

section {

display: flex;

justify-content: space-around;

 


.rouge {

width: 200px;

height: 200px;

background-color: red;

}

}

}

3. Installation sous VSCode

Pourquoi un compilateur ?

Les navigateurs ne comprennent pas directement le code Sass. Il est donc nécessaire d’utiliser un compilateur pour convertir les fichiers .scss ou .sass en .css.

Étapes d’installation avec « Live Sass Compiler » :

  1. Installez l’extension Live Sass Compiler dans Visual Studio Code.
  2. Créez un fichier Sass, par exemple style.scss.
  3. Lancez le compilateur : il génère automatiquement un fichier CSS associé, prêt à être utilisé.

Astuce : Seul le fichier CSS doit être uploadé sur le serveur lors du déploiement.

4. Utilisation

Démarrage :

  1. Créez un fichier HTML (index.html) et ajoutez un lien vers style.css :
    html
    <link rel="stylesheet" href="./style.css">

  2. Créez un fichier style.scss et commencez à écrire vos styles.
  3. Activez le plug-in Watch Sass pour générer automatiquement le fichier CSS.

5. Aperçu avant et après compilation

  • Avant compilation : Le fichier style.scss contient du code Sass non compréhensible par le navigateur.
  • Après compilation : Le fichier style.css contient du CSS classique prêt à être interprété par le navigateur.

6. Mise en œuvre

Écriture imbriquée

Sass permet d’imbriquer les sélecteurs pour simplifier l’écriture du CSS. Exemple SCSS :

scss
body {

section {

.rouge {

background-color: red;

}

}

}

Écriture non imbriquée (CSS généré)

css
body section .rouge {

background-color: red;

}

7. Utilisation des variables en SCSS

Les variables permettent de stocker des valeurs réutilisables, comme des couleurs ou des tailles.

Exemple :

Définir les variables

Fichier _variables.scss :

scss
$cprim: #f00020;

$csec: #000000;

Les utiliser

Fichier style.scss :

scss

@import 'variables';


body {

background-color: $cprim;

color: $csec;

}

8. Utilisation des mixins en SCSS

Une mixin est une fonction CSS réutilisable avec des paramètres personnalisables.

Exemple :

Fichier _mixins.scss :

scss
@mixin textrouge {

color: #f00020;

font-size: 1.2em;

}

Fichier style.scss :

scss

@import 'mixins';


p {

@include textrouge;

}

9. Création de composants et utilisation des feuilles partielles

Organisation modulaire :

Sass permet de diviser le code en plusieurs fichiers partiels (ou partials), chacun dédié à un aspect particulier (variables, mixins, styles pour une section…).

Exemple d’arborescence :

sass/

├── _variables.scss

├── _mixins.scss

├── _header.scss

└── style.scss

Compilation des partiels :

Dans style.scss :

scss
@import 'variables';

@import 'mixins';

@import 'header';

Conclusion

Sass est un outil puissant qui améliore considérablement l’efficacité et la maintenabilité des feuilles de style. En utilisant des fonctionnalités comme les imbrications, les variables, les mixins et les fichiers partiels, il permet de transformer des projets complexes en structures claires et modulaires.

...

…
Le sass - css