Comprendre 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 :
- Utilisation de l'extension Visual Studio Code - Live Sass Compiler ;
- Utilisation de l'application - Scout App.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
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
Comprendre 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 :
- Utilisation de l'extension Visual Studio Code - Live Sass Compiler ;
- Utilisation de l'application - Scout App.
Merci pour vos commentaires !