Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Comprendre la Syntaxe Sass pour Améliorer le CSS | Préprocesseurs CSS et Sass
Techniques CSS Avancées

bookComprendre la Syntaxe Sass pour Améliorer le CSS

Pour commencer à écrire du code Sass, il est nécessaire de créer un fichier avec l’extension .scss (par exemple, feature.scss).

Examinons la syntaxe Sass à partir du code CSS suivant. Nous allons manipuler un bouton qui aura un effet au survol. Voici le code CSS correspondant :

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
}

.button:hover {
  background-color: darkmagenta;
}

Réécrivons ce même code en syntaxe Sass :

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
  
  &:hover {
    background-color: darkmagenta;
  }
}

La différence réside dans le fait que l’on applique les styles d’un élément à l’intérieur de la première paire d’accolades {}. De plus, il n’est pas nécessaire de répéter le nom de la classe de l’élément. À la place, on utilise l’esperluette (&).

Remarque

En cas de questions ou d’incompréhension concernant certaines fonctionnalités de Sass, il est fortement recommandé de consulter la documentation Sass.

Compilation

Les navigateurs ne comprennent pas la syntaxe des préprocesseurs. Ils interprètent uniquement les syntaxes html, css et javascript. Comment cela fonctionne-t-il ? Il est nécessaire de compiler le fichier Sass en fichier CSS. Après la compilation, le résultat sera visible.

Nous disposons des options suivantes pour compiler Sass en CSS :

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 7. Chapitre 2

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.04

bookComprendre la Syntaxe Sass pour Améliorer le CSS

Glissez pour afficher le menu

Pour commencer à écrire du code Sass, il est nécessaire de créer un fichier avec l’extension .scss (par exemple, feature.scss).

Examinons la syntaxe Sass à partir du code CSS suivant. Nous allons manipuler un bouton qui aura un effet au survol. Voici le code CSS correspondant :

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
}

.button:hover {
  background-color: darkmagenta;
}

Réécrivons ce même code en syntaxe Sass :

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
  
  &:hover {
    background-color: darkmagenta;
  }
}

La différence réside dans le fait que l’on applique les styles d’un élément à l’intérieur de la première paire d’accolades {}. De plus, il n’est pas nécessaire de répéter le nom de la classe de l’élément. À la place, on utilise l’esperluette (&).

Remarque

En cas de questions ou d’incompréhension concernant certaines fonctionnalités de Sass, il est fortement recommandé de consulter la documentation Sass.

Compilation

Les navigateurs ne comprennent pas la syntaxe des préprocesseurs. Ils interprètent uniquement les syntaxes html, css et javascript. Comment cela fonctionne-t-il ? Il est nécessaire de compiler le fichier Sass en fichier CSS. Après la compilation, le résultat sera visible.

Nous disposons des options suivantes pour compiler Sass en CSS :

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 7. Chapitre 2
some-alt