Syntaxe SASS et syntaxe SCSS

Cet article explique la syntaxe SASS et la syntaxe SCSS.

Nous allons expliquer en détail les différences entre la syntaxe SASS et la syntaxe SCSS, et fournir des exemples concrets pour approfondir votre compréhension.

YouTube Video

Syntaxe SASS et syntaxe SCSS

SASS est un langage de feuilles de style conçu pour étendre les capacités du CSS. SASS possède deux syntaxes. Il s'agit de la syntaxe SASS et de la syntaxe SCSS.

Aperçu de SASS et SCSS

Syntaxe SASS

La syntaxe SASS s'écrit comme suit :.

 1$primary-color: #3498db
 2$secondary-color: #2ecc71
 3
 4body
 5    font-family: Arial, sans-serif
 6    color: $primary-color
 7
 8h1
 9    font-size: 2rem
10    color: $secondary-color
11
12    &:hover
13        text-decoration: underline

• Une syntaxe basée sur l'indentation qui n’utilise pas d’accolades {} ni de points-virgules ;.
• Elle est conçue pour écrire un code concis et facile à lire.
• L’extension de fichier est .sass.

Syntaxe SCSS

La syntaxe SCSS s'écrit comme suit :.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4body {
 5    font-family: Arial, sans-serif;
 6    color: $primary-color;
 7}
 8
 9h1 {
10    font-size: 2rem;
11    color: $secondary-color;
12
13    &:hover {
14        text-decoration: underline;
15    }
16}

• Une syntaxe similaire au CSS, utilisant des accolades {} et des points-virgules ;.
• Très compatible avec le code CSS existant, ce qui permet de convertir directement du CSS en fichier SCSS.
• L’extension de fichier est .scss.

Principales différences entre SASS et SCSS

Critères de sélection

Le choix entre les deux dépend des besoins du projet et de l’équipe.

• Quand choisir la syntaxe SASS

  • La syntaxe SASS permet d’écrire un code concis et clair.
  • Si toute l’équipe est familière avec la syntaxe SASS, c’est un choix approprié.

• Quand choisir la syntaxe SCSS

  • Si la compatibilité avec le CSS est importante, et que de nombreux membres de l’équipe sont familiers avec CSS, la syntaxe SCSS est plus appropriée.

Avantages de SASS et SCSS

Voici les avantages communs des syntaxes SASS et SCSS :.

1. Utilisation des variables

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

• En utilisant des variables, vous pouvez définir un style à un seul endroit et le réutiliser à plusieurs endroits. Les modifications de design peuvent être appliquées partout en changeant simplement la valeur des variables, ce qui améliore la maintenabilité.

2. Mixins

1@mixin border-radius($radius) {
2    -webkit-border-radius: $radius;
3    -moz-border-radius: $radius;
4    border-radius: $radius;
5}
6
7button {
8    @include border-radius(10px);
9}

• Les mixins vous permettent de regrouper des styles ou du code avec préfixe fournisseur souvent utilisés, et de les appliquer de manière flexible à l'aide d'arguments. Cela réduit la duplication du code et améliore la maintenabilité.

3. Règles imbriquées

 1nav {
 2    ul {
 3        margin: 0;
 4        padding: 0;
 5        list-style: none;
 6    }
 7
 8    li { display: inline-block; }
 9    a { text-decoration: none; }
10}

• En utilisant l'imbrication, vous pouvez écrire les styles de manière hiérarchique en suivant la structure HTML, ce qui facilite le regroupement des règles associées. Cela améliore à la fois la lisibilité du code et la maintenabilité.

4. Héritage

 1%button-style {
 2    display: inline-block;
 3    padding: 10px 20px;
 4    font-size: 16px;
 5}
 6
 7.btn-primary {
 8    @extend %button-style;
 9    background-color: blue;
10    color: white;
11}
12
13.btn-secondary {
14    @extend %button-style;
15    background-color: gray;
16    color: black;
17}

• En utilisant l'héritage, vous pouvez regrouper et réutiliser des styles communs. Cela réduit la duplication du code et maintient une cohérence dans le design.

Conclusion

Le choix entre SASS et SCSS dépend des préférences du développeur et des exigences du projet.

La syntaxe SASS met l’accent sur la simplicité, tandis que la syntaxe SCSS met l’accent sur la compatibilité CSS. Les deux syntaxes sont puissantes et peuvent considérablement améliorer la productivité en CSS.

Choisir l’option la plus adaptée à votre projet permet une gestion efficace des feuilles de style.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video