Fonctions Sass et flux de contrôle
Écrivez une logique CSS dynamique avec les fonctions intégrées de Sass et les directives @if, @each et @for.
Fonctions Sass et flux de contrôle est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Fonctions intégrées de Sass
Sass fournit de nombreuses fonctions intégrées pour manipuler les couleurs, effectuer des calculs, traiter des chaînes et bien plus encore. Elles s’exécutent au moment de la compilation.
<div class="darker">darken($base, 15%)</div>
<div class="lighter">lighten($base, 15%)</div>
<div class="faded">transparentize($base, 0.5)</div>
<div class="mixed">mix($base, white, 60%)</div>
Fonctions de couleur
Principales fonctions de couleur de Sass :
darken($color, $amount)lighten($color, $amount)saturate($color, $amount)mix($color1, $color2, $weight)rgba($color, $alpha)color.scale($color, $lightness: 20%)
Fonctions personnalisées avec @function
Définissez des fonctions réutilisables qui renvoient des valeurs (et non des règles CSS) :
<h2 class="heading">Heading (2rem)</h2>
<p class="body">Body text (1.125rem)</p>
Flux de contrôle @if @else
Produisez du CSS de manière conditionnelle en fonction des valeurs des variables :
<p class="text-large">Large text variant</p>
<p class="text-small">Small text variant</p>
<p class="text-default">Default text variant</p>
Boucle @each
Parcourez une liste ou une map pour générer plusieurs règles :
<button class="btn-primary">Primary</button>
<button class="btn-danger">Danger</button>
<button class="btn-success">Success</button>
Boucle @for
Générez du CSS pour une plage de valeurs :
<div class="col-1">col-1 (20%)</div>
<div class="col-2">col-2 (40%)</div>
<div class="col-3">col-3 (60%)</div>
<div class="col-4">col-4 (80%)</div>
<div class="col-5">col-5 (100%)</div>
Boucle @while
Répétez les opérations tant qu’une condition est vraie. Utilisez cette boucle avec parcimonie : @each et @for couvrent la plupart des cas :
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
Maps Sass
Les maps sont des structures de données clé-valeur dans Sass :
<div class="box">Responsive box (resize wider than 768px to see color change)</div>
@error @warn @debug
Sass fournit trois fonctions de diagnostic :
@error: arrête la compilation avec un message@warn: consigne un avertissement sans interrompre la compilation@debug: consigne une valeur pendant le développement
Interpolation #{...}
Utilisez #{$variable} pour insérer les valeurs de variables dans des sélecteurs, des noms de propriétés ou des requêtes multimédias :
<p class="element">Interpolated property (#{$property})</p>
Vérification rapide
Quelle est la différence entre un @mixin Sass et une @function Sass ?
Récapitulatif
Les fonctions de couleur intégrées de Sass (darken, lighten, mix) permettent de manipuler les couleurs au moment de la compilation. Une @function personnalisée renvoie une valeur calculée. @if/@else ajoute une sortie conditionnelle. @each parcourt les listes et les mappages. @for parcourt des plages de nombres. Ces fonctionnalités permettent de créer des feuilles de style puissantes et DRY, avec un minimum de répétitions.
Questions Fréquemment Posées
La leçon « Fonctions Sass et flux de contrôle » est-elle gratuite ?
Oui — le texte complet de « Fonctions Sass et flux de contrôle » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Fonctions Sass et flux de contrôle » ?
Écrivez une logique CSS dynamique avec les fonctions intégrées de Sass et les directives @if, @each et @for. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Fonctions Sass et flux de contrôle » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Imbrication des variables et fichiers partiels
- Mixins et inclusions
- Sélecteurs d’extension et d’espace réservé
- Fonctions Sass et flux de contrôle