Section courante

A propos

Section administrative du site

Le CSS en soi peut être amusant, mais les feuilles de style deviennent de plus en plus volumineuses, complexes et difficiles à maintenir. C'est là qu'un préprocesseur peut aider. SASS a des fonctionnalités n'existant pas encore dans CSS comme l'imbrication, les mixins, l'héritage et d'autres avantages astucieux qui vous aident à écrire un CSS robuste et maintenable.

Une fois que vous avez commencé à bricoler avec SASS, il prendra votre fichier SASS prétraité et l'enregistrera en tant que fichier CSS normal que vous pourrez utiliser sur votre site Web.

Le moyen le plus direct d'y parvenir est dans votre terminal. Une fois SASS installé, vous pouvez compiler votre SASS en CSS à l'aide de la commande SASS. Vous devrez indiquer à SASS à partir de quel fichier créer et où générer le CSS. Par exemple, exécuter SASS input.scss output.css à partir de votre terminal prendrait un seul fichier SASS, input.scss, et compilerait ce fichier en output.css.

Vous pouvez également surveiller des fichiers ou des répertoires individuels avec le drapeau --watch. Le drapeau de surveillance indique à SASS de surveiller vos fichiers source pour les modifications et de recompiler le CSS chaque fois que vous enregistrez votre SASS. Si vous vouliez surveiller (au lieu de créer manuellement) votre fichier input.scss, vous ajouteriez simplement le drapeau de surveillance à votre commande, comme suit :

sass --watch input.scss output.css

Vous pouvez regarder et sortir dans des répertoires en utilisant des chemins de dossier comme entrée et sortie, et en les séparant par deux-points. Dans cet exemple :

sass --watch app/sass:public/stylesheets

Sass surveillerait tous les fichiers du dossier app/sass pour les modifications et compilerait le CSS dans le dossier public/stylesheets.

Variables

Considérez les variables comme un moyen d'entreposer des informations que vous souhaitez réutiliser dans votre feuille de style. Vous pouvez entreposer des éléments tels que des couleurs, des piles de polices de caractères ou toute valeur CSS que vous pensez vouloir réutiliser. SASS utilise le symbole $ pour faire de quelque chose une variable. Voici un exemple :

SCSS SASS CSS
  1. $font-stack: Helvetica, sans-serif;
  2. $primary-color: #333;
  3.  
  4. body {
  5.   font: 100% $font-stack;
  6.   color: $primary-color;
  7. }
  1. $font-stack: Helvetica, sans-serif
  2. $primary-color: #333
  3.  
  4. body
  5.   font: 100% $font-stack
  6.   color: $primary-color
  1. body {
  2.   font: 100% Helvetica, sans-serif;
  3.   color: #333;
  4. }

Lorsque le SASS est traité, il prend les variables que nous définissons pour $font-stack et $primary-color et génère un CSS normal avec nos valeurs de variables placées dans le CSS. Cela peut être extrêmement puissant lorsque vous travaillez avec des couleurs de marque et en les gardant cohérentes sur tout le site.

Nidification

Lors de l'écriture de HTML, vous avez probablement remarqué qu'il a une hiérarchie imbriquée et visuelle claire. CSS, en revanche, ne le fait pas.

SASS vous permettra d'imbriquer vos sélecteurs CSS d'une manière suivant la même hiérarchie visuelle de votre HTML. Sachez que des règles trop imbriquées entraîneront un CSS surqualifié qui pourrait s'avérer difficile à maintenir et qui est généralement considéré comme une mauvaise pratique.

Dans cet esprit, voici un exemple de styles typiques pour la navigation d'un site :

SCSS SASS CSS
  1. nav {
  2.   ul {
  3.     margin: 0;
  4.     padding: 0;
  5.     list-style: none;
  6.   }
  7.  
  8.   li { display: inline-block; }
  9.  
  10.   a {
  11.     display: block;
  12.     padding: 6px 12px;
  13.     text-decoration: none;
  14.   }
  15. }
  1. nav
  2.   ul
  3.     margin: 0
  4.     padding: 0
  5.     list-style: none
  6.  
  7.   li
  8.     display: inline-block
  9.  
  10.   a
  11.     display: block
  12.     padding: 6px 12px
  13.     text-decoration: none
  14.  
  1. nav ul {
  2.   margin: 0;
  3.   padding: 0;
  4.   list-style: none;
  5. }
  6. nav li {
  7.   display: inline-block;
  8. }
  9. nav a {
  10.   display: block;
  11.   padding: 6px 12px;
  12.   text-decoration: none;
  13. }

Vous remarquerez que les sélecteurs ul, li et a sont imbriqués dans le sélecteur nav. C'est un excellent moyen d'organiser votre CSS et de le rendre plus lisible.

Partiels

Vous pouvez créer des fichiers SASS partiels contenant de petits extraits de CSS que vous pouvez inclure dans d'autres fichiers SASS. C'est un excellent moyen de modulariser votre CSS et de faciliter la maintenance. Un partiel est un fichier SASS nommé avec un trait de soulignement au début. Vous pourriez le nommer quelque chose comme _partial.scss. Le trait de soulignement permet à SASS de savoir que le fichier n'est qu'un fichier partiel et qu'il ne doit pas être généré dans un fichier CSS. Les partiels SASS sont utilisés avec la règle @use.

Modules

Vous n'êtes pas obligé d'écrire tous vos SASS dans un seul fichier. Vous pouvez le diviser comme vous le souhaitez avec la règle @use. Cette règle charge un autre fichier SASS en tant que module, ce qui signifie que vous pouvez faire référence à ses variables, mixins et fonctions dans votre fichier SASS avec un espace de noms basé sur le nom du fichier. L'utilisation d'un fichier inclura également le CSS qu'il génère dans votre sortie compilée !

SCSS SASS CSS
  1. // _base.scss
  2. $font-stack: Helvetica, sans-serif;
  3. $primary-color: #333;
  4.  
  5. body {
  6.   font: 100% $font-stack;
  7.   color: $primary-color;
  8. }
  1. // styles.scss
  2. @use 'base';
  3.  
  4. .inverse {
  5.   background-color: base.$primary-color;
  6.   color: white;
  7. }
  1. // _base.sass
  2. $font-stack: Helvetica, sans-serif
  3. $primary-color: #333
  4.  
  5. body
  6.   font: 100% $font-stack
  7.   color: $primary-color
  1. // styles.sass
  2. @use 'base'
  3.  
  4. .inverse
  5.   background-color: base.$primary-color
  6.   color: white
  1. body {
  2.   font: 100% Helvetica, sans-serif;
  3.   color: #333;
  4. }
  5.  
  6. .inverse {
  7.   background-color: #333;
  8.   color: white;
  9. }

Remarquez que nous utilisons @use 'base'; dans le fichier styles.scss. Lorsque vous utilisez un fichier, vous n'avez pas besoin d'inclure l'extension de fichier. Sass est intelligent et le découvrira pour vous.

Mixins

Certaines choses en CSS sont un peu fastidieuses à écrire, en particulier avec CSS3 et les nombreux préfixes de fournisseurs existant. Un mixin vous permet de créer des groupes de déclarations CSS que vous souhaitez réutiliser sur l'ensemble de votre site. Cela aide à garder votre SASS très propre. Vous pouvez même transmettre des valeurs pour rendre votre mixin plus flexible. Voici un exemple de thème.

SCSS SASS CSS
  1. @mixin theme($theme: DarkGray) {
  2.   background: $theme;
  3.   box-shadow: 0 0 1px rgba($theme, .25);
  4.   color: #fff;
  5. }
  6.  
  7. .info {
  8.   @include theme;
  9. }
  10. .alert {
  11.   @include theme($theme: DarkRed);
  12. }
  13. .success {
  14.   @include theme($theme: DarkGreen);
  15. }
  1. @mixin theme($theme: DarkGray)
  2.   background: $theme
  3.   box-shadow: 0 0 1px rgba($theme, .25)
  4.   color: #fff
  5.  
  6. .info
  7.   @include theme
  8.  
  9. .alert
  10.   @include theme($theme: DarkRed)
  11.  
  12. .success
  13.   @include theme($theme: DarkGreen)
  1. .info {
  2.   background: DarkGray;
  3.   box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  4.   color: #fff;
  5. }
  6.  
  7. .alert {
  8.   background: DarkRed;
  9.   box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  10.   color: #fff;
  11. }
  12.  
  13. .success {
  14.   background: DarkGreen;
  15.   box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  16.   color: #fff;
  17. }

Pour créer un mixin, utilisez la directive @mixin et donnez-lui un nom. Nous avons nommé notre thème mixin. Nous utilisons également la variable $theme entre parenthèses afin de pouvoir passer un thème de ce que nous voulons. Après avoir créé votre mixin, vous pouvez l'utiliser comme déclaration CSS commençant par @include suivi du nom du mixin.

Extension/Héritage

L'utilisation de @extend vous permet de partager un ensemble de propriétés CSS d'un sélecteur à un autre. Dans notre exemple, nous allons créer une simple série de messages pour les erreurs, les avertissements et les réussites en utilisant une autre fonctionnalité allant de pair avec les classes d'espace réservé étendues. Une classe d'espace réservé est un type spécial de classe ne s'affichant que lorsqu'elle est étendue et peut aider à garder votre CSS compilé propre.

SCSS SASS CSS
  1. /* Ce CSS s'affichera car %message-shared est étendu. */
  2. %message-shared {
  3.   border: 1px solid #ccc;
  4.   padding: 10px;
  5.   color: #333;
  6. }
  7.  
  8. // Ce CSS ne s'affichera pas car %equal-heights n'est jamais étendu.
  9. %equal-heights {
  10.   display: flex;
  11.   flex-wrap: wrap;
  12. }
  13.  
  14. .message {
  15.   @extend %message-shared;
  16. }
  17.  
  18. .success {
  19.   @extend %message-shared;
  20.   border-color: green;
  21. }
  22.  
  23. .error {
  24.   @extend %message-shared;
  25.   border-color: red;
  26. }
  27.  
  28. .warning {
  29.   @extend %message-shared;
  30.   border-color: yellow;
  31. }
  1. /* Ce CSS s'affichera car %message-shared est étendu. */
  2. %message-shared
  3.   border: 1px solid #ccc
  4.   padding: 10px
  5.   color: #333
  6.  
  7.  
  8. // Ce CSS ne s'affichera pas car %equal-heights n'est jamais étendu.
  9. %equal-heights
  10.   display: flex
  11.   flex-wrap: wrap
  12.  
  13.  
  14. .message
  15.   @extend %message-shared
  16.  
  17.  
  18. .success
  19.   @extend %message-shared
  20.   border-color: green
  21.  
  22.  
  23. .error
  24.   @extend %message-shared
  25.   border-color: red
  26.  
  27.  
  28. .warning
  29.   @extend %message-shared
  30.   border-color: yellow
  1. /* Ce CSS s'affichera car %message-shared est étendu. */
  2. .message, .success, .error, .warning {
  3.   border: 1px solid #ccc;
  4.   padding: 10px;
  5.   color: #333;
  6. }
  7.  
  8. .success {
  9.   border-color: green;
  10. }
  11.  
  12. .error {
  13.   border-color: red;
  14. }
  15.  
  16. .warning {
  17.   border-color: yellow;
  18. }

Le code ci-dessus indique à .message, .success, .error et .warning de se comporter comme %message-shared. Cela signifie que partout où %message-shared apparaît, .message, .success, .error et .warning le seront aussi. La magie opère dans le CSS généré, où chacune de ces classes obtiendra les mêmes propriétés CSS que %message-shared. Cela vous évite d'avoir à écrire plusieurs noms de classe sur les éléments HTML.

Vous pouvez étendre la plupart des sélecteurs CSS simples en plus des classes d'espace réservé dans SASS, mais l'utilisation d'espaces réservés est le moyen le plus simple de vous assurer que vous n'étendez pas une classe imbriquée ailleurs dans vos styles, ce qui peut entraîner des sélecteurs involontaires dans votre CSS.

Notez que le CSS dans %equal-heights n'est pas généré, car %equal-heights n'est jamais étendu.

Les opérateurs

Faire des mathématiques dans votre CSS est très utile. SASS a une poignée d'opérateurs mathématiques standard comme +, -, *, math.div() et %. Dans notre exemple, nous allons faire quelques calculs simples pour calculer les largeurs d'un article et de côté :

SCSS SASS CSS
  1. @use "sass:math";
  2.  
  3. .container {
  4.   display: flex;
  5. }
  6.  
  7. article[role="main"] {
  8.   width: math.div(600px, 960px) * 100%;
  9. }
  10.  
  11. aside[role="complementary"] {
  12.   width: math.div(300px, 960px) * 100%;
  13.   margin-left: auto;
  14. }
  1. @use "sass:math"
  2.  
  3. .container
  4.   display: flex
  5.  
  6. article[role="main"]
  7.   width: math.div(600px, 960px) * 100%
  8.  
  9. aside[role="complementary"]
  10.   width: math.div(300px, 960px) * 100%
  11.   margin-left: auto
  1. .container {
  2.   display: flex;
  3. }
  4.  
  5. article[role="main"] {
  6.   width: 62.5%;
  7. }
  8.  
  9. aside[role="complementary"] {
  10.   width: 31.25%;
  11.   margin-left: auto;
  12. }

Nous avons créé une grille fluide très simple, basée sur 960px. Les opérations dans SASS nous permettent de faire quelque chose comme prendre des valeurs de pixels et les convertir en pourcentages sans trop de tracas.



Dernière mise à jour : Vendredi, le 26 mai 2023