Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentesRévision précédente | |||
| cours:informatique:dev:web:simplifiez-vous-le-css-avec-sass:140_utiliser_sass [2025/08/16 09:13] – yoann | cours:informatique:dev:web:simplifiez-vous-le-css-avec-sass:140_utiliser_sass [2025/08/16 10:18] (Version actuelle) – yoann | ||
|---|---|---|---|
| Ligne 191: | Ligne 191: | ||
| Sélectionnez Sass ou SCSS, puis cliquez sur le bouton Save & Close en bas de la page. | Sélectionnez Sass ou SCSS, puis cliquez sur le bouton Save & Close en bas de la page. | ||
| - | Dans Pen Settings, le langage CSS est sélectionné. Dans CSS Preprocessor, | ||
| - | Définir SCSS ou Sass comme préprocesseur sur Codepen | ||
| - | À vous de jouer ! | ||
| - | Depuis ce CodePen, reprenez votre barre de navigation du chapitre précédent, | + | {{config_codepen.png}} |
| - | Vérifiez vos réponses avec la correction dans ce CodePen. | + | Définir SCSS ou Sass comme préprocesseur sur Codepen |
| - | En résumé | + | |
| - | + | ||
| - | Les préprocesseurs CSS vous permettent d’imbriquer votre code (on appelle ça le nesting) pour créer une hiérarchie plus facile à lire, et regrouper des morceaux de code entre eux. | + | |
| - | + | ||
| - | Il existe plein de préprocesseurs, | + | |
| - | + | ||
| - | La syntaxe .scss est très similaire à la syntaxe CSS. | + | |
| - | La syntaxe | ||
| - | On peut utiliser du code CSS préexistant dans Sass en l’intégrant dans un fichier .scss . | + | ===== En résumé ===== |
| - | | + | * Les préprocesseurs CSS vous permettent d’imbriquer votre code (on appelle ça le nesting) pour créer une hiérarchie plus facile à lire, et regrouper des morceaux de code entre eux. |
| + | * Il existe plein de préprocesseurs, | ||
| + | * La syntaxe '' | ||
| + | * La syntaxe | ||
| + | * On peut utiliser du code CSS préexistant dans Sass en l’intégrant dans un fichier '' | ||
| + | * Le code Sass doit être compilé en CSS pour que les navigateurs puissent le lire et l’utiliser. | ||
| + | Il est temps de faire un point et de revenir sur tout ce que vous avez appris avec le quiz de fin de section ! Je vous retrouve dans la partie suivante où nous utiliserons Sass pour optimiser votre code. | ||