Introduction à Sass

Ce que vous devriez savoir

Avant de continuer, vous devriez avoir une compréhension de base des éléments suivants :

  • HTML
  • CSS

Si vous souhaitez apprendre ces sujets d'abord, visitez notre Page d'accueil Visitez ces tutoriels sur la page

Qu'est-ce que Sass ?

  • Sass signifie Syntactically Awesome Stylesheet (une feuille de style avec une syntaxe incroyable)
  • Sass est une extension CSS
  • Sass est un préprocesseur CSS
  • Sass est是完全兼容所有版本的 CSS
  • Sass réduit la répétition du CSS, économisant ainsi du temps
  • Sass a été conçu par Hampton Catlin et développé par Natalie Weizenbaum en 2006
  • Sass peut être téléchargé et utilisé gratuitement

Pourquoi utiliser Sass ?

Les feuilles de style deviennent de plus en plus grandes, plus complexes et plus difficiles à maintenir. C'est là que les préprocesseurs CSS peuvent aider.

Sass vous permet d'utiliser des caractéristiques qui n'existent pas dans CSS, comme les variables, les règles imbriquées, les mixins, les imports, l'héritage, les fonctions intégrées et d'autres fonctionnalités.

Un exemple simple mais utile de Sass

Supposons que nous ayons un site avec trois couleurs principales :

#a2b9bc
#b2ad7f
#878f99

Combien de fois devez-vous saisir ces valeurs HEX ? Beaucoup de fois. Et si la même couleur change ?

Vous pouvez écrire le code suivant en Sass, plutôt que de taper plusieurs fois les valeurs ci-dessus :

Exemple Sass

/* Définir une variable pour la couleur originale */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* Utilisation des variables */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

Ainsi, lors de l'utilisation de Sass, si la couleur originale change, vous n'avez besoin de la modifier qu'à un seul endroit.

Comment Sass fonctionne-t-il ?

Le navigateur ne comprend pas le code Sass. Par conséquent, vous avez besoin d'un préprocesseur Sass pour convertir le code Sass en CSS standard.

Ce processus est appelé transpilation (transpiling). Donc, vous devez fournir du code Sass au transpileur (un programme) et obtenir du code CSS.

Avis :La traduction est un terme utilisé pour convertir/ traduire le code source écrit dans une langue en une autre langue.

Type de fichier Sass

L'extension de fichier des fichiers Sass est ".scss".

Commentaires Sass

Sass prend en charge les commentaires CSS standards /* comment */De plus, il prend également en charge les commentaires en ligne // comment:

Exemple Sass

/* Définition des couleurs principales */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* Utilisation des variables */
.main-header {
  background-color: $primary_1; // Vous pouvez ajouter des commentaires en ligne ici
}