Aller au contenu

Variables CSS

Les propriétés personnalisées CSS (variables) vous permettent de définir des valeurs une seule fois et de les réutiliser sur l'ensemble de votre site. Modifiez la valeur à un seul endroit, et chaque élément qui l'utilise se met à jour instantanément. C'est le fondement d'un thème cohérent.

Une variable CSS est un nom que vous définissez, comme --brand-color, et chaque fois que vous la référencez avec var(--brand-color), le navigateur substitue la valeur réelle. Cela semble simple, mais cela transforme la façon dont vous gérez les couleurs, la typographie, l'espacement et bien plus -- surtout quand vous devez changer de thème ou faire évoluer votre design.

Note : Les variables CSS sont entièrement prises en charge dans Silex via le plugin CSS Variables. Pour les fonctionnalités avancées comme les variables limitées aux composants ou le basculement en temps réel (Mode sombre), votez pour Dark Mode for Websites sur la feuille de route.

Créer une variable

Ouvrez la boîte de dialogue CSS Variables (l'icône pinceau dans la barre latérale gauche, ou via le Style Manager).

Définissez les variables par nom et par type :

  • Variables de couleur -- les couleurs utilisées dans votre design (couleurs de marque, couleurs de texte, bordures)
  • Variables de taille -- espacements, tailles de police, largeurs, hauteurs
  • Variables de typographie -- les familles de polices pour des caractères cohérents

Cliquez sur Add pour créer une variable. Donnez-lui un nom (par ex., primary-color ou heading-font) et définissez une valeur initiale. La variable est stockée dans la règle CSS :root, ce qui la rend accessible à tous les éléments.

Exemples de couleurs : - --brand-blue: #0066cc - --text-dark: #333333 - --border-light: #e0e0e0

Exemples de tailles : - --spacing-small: 8px - --spacing-large: 24px - --font-size-heading: 32px

Exemples de typographie : - --font-sans: "Inter", sans-serif - --font-serif: "Merriweather", serif

Utiliser une variable

Une fois que vous avez créé une variable, vous pouvez l'appliquer à toute propriété CSS qui accepte ce type de valeur.

Dans le Style Manager, cherchez un bouton + à côté des propriétés de couleur, de taille ou de typographie. Cliquez dessus pour ouvrir une liste déroulante des variables disponibles. Sélectionnez la variable, et la propriété utilise désormais var(--nom-de-variable) au lieu d'une valeur codée en dur.

Exemple : Définissez Background-color sur la variable --brand-blue. Plus tard, vous changez --brand-blue en #0044aa, et chaque élément utilisant cette variable se met à jour instantanément.

Vous pouvez aussi combiner les variables avec d'autres valeurs. Par exemple, linear-gradient(to right, var(--brand-blue), transparent) utilise une variable comme couleur de départ d'un dégradé.

Organiser les variables par point de rupture

Silex vous permet de définir des valeurs de variables différentes selon les tailles d'écran. Dans la boîte de dialogue CSS Variables, vous pouvez définir une variable pour la taille desktop, puis la surcharger pour tablette ou mobile.

C'est utile pour la typographie responsive : définissez --font-size-heading: 48px pour le desktop, puis 32px pour la tablette et 24px pour le mobile. Chaque élément utilisant var(--font-size-heading) s'adapte automatiquement.

Étapes :

  1. Ouvrez la boîte de dialogue CSS Variables
  2. Sélectionnez ou créez une variable
  3. Choisissez un appareil (point de rupture) dans la liste déroulante
  4. Définissez la valeur pour ce point de rupture

Les variables définies au niveau desktop sont héritées par les points de rupture plus petits sauf si elles sont surchargées.

Conventions de nommage pour les variables

De bons noms de variables rendent votre système de design lisible et maintenable.

Schémas de nommage pour les couleurs : - --primary-color, --secondary-color -- couleurs principales de la marque - --text-dark, --text-light -- couleurs de texte - --bg-white, --bg-gray -- couleurs d'arrière-plan - --border-color, --shadow-color -- effets - --success-color, --error-color -- couleurs sémantiques

Schémas de nommage pour les tailles : - --spacing-xs, --spacing-sm, --spacing-md, --spacing-lg -- échelle d'espacement cohérente - --font-size-sm, --font-size-base, --font-size-lg -- échelle typographique - --radius-small, --radius-large -- échelle de border radius

Évitez les noms liés à l'apparence (--dark-blue) au profit de noms sémantiques (--primary-color). Ainsi, si votre marque évolue, vous changez la valeur, pas le nom.

Cas d'usage courants

Thème

Définissez toutes vos couleurs de marque comme variables. Chaque bouton, titre et bordure référence la même variable. Pour changer d'identité visuelle, modifiez la valeur à un seul endroit.

:root {
  --primary-color: #0066cc;
  --secondary-color: #ff6600;
  --text-color: #333333;
  --bg-color: #ffffff;
}

Typographie responsive

Définissez les tailles de police pour chaque point de rupture. Les titres s'adaptent automatiquement sur mobile.

:root {
  --font-size-h1: 48px;
}

@media (max-width: 768px) {
  :root {
    --font-size-h1: 32px;
  }
}

Espacement cohérent

Utilisez une échelle d'espacement pour les margins et les paddings. Cela évite les écarts dispersés et incohérents.

:root {
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 16px;
  --spacing-4: 24px;
}

Appliquez-les aux paddings et margins dans tout votre design. Modifier --spacing-3 met à jour chaque élément qui l'utilise.

Valeurs de repli

Quand vous utilisez une variable, vous pouvez fournir une valeur de repli au cas où la variable n'est pas définie :

color: var(--brand-color, #0066cc);

Si --brand-color n'est pas défini, la couleur revient à #0066cc. C'est utile pour s'assurer que les designs fonctionnent même si une variable est manquante.

Exemple pratique : variables pour thème clair et sombre

Bien que Silex ne dispose pas encore du basculement de mode sombre intégré, vous pouvez préparer vos variables pour cela :

  1. Définissez toutes les couleurs comme variables dans :root (thème clair)
  2. Utilisez des noms sémantiques comme --bg-primary, --text-primary
  3. Plus tard, quand le mode sombre sera pris en charge (via la fonctionnalité de la feuille de route), vous ajouterez une media query ou un sélecteur de classe avec les variables du thème sombre

Base (clair) : 

:root {
  --bg-primary: #ffffff;
  --text-primary: #000000;
  --border-primary: #e0e0e0;
}

Futur (mode sombre) : 

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --text-primary: #ffffff;
    --border-primary: #333333;
  }
}

Même si Silex ne bascule pas encore automatiquement les thèmes, utiliser des noms de variables sémantiques vous prépare pour quand ce sera le cas.

Erreurs courantes

  • Nommer les variables d'après leur apparence, pas leur fonction. Évitez --dark-blue au profit de --primary-color. Vous devrez tout renommer si votre marque change.
  • Créer trop de variables. Commencez par l'essentiel : couleurs de marque, typographie, espacement. Ajoutez-en davantage au fur et à mesure que votre design se développe.
  • Oublier le double tiret. Les noms de variables CSS doivent commencer par -- (par ex., --primary, pas primary).
  • Utiliser des variables non définies sans valeur de repli. Si vous référencez une variable qui n'existe pas, rien ne s'affiche. Fournissez toujours une valeur de repli ou assurez-vous que la variable existe.
  • Ne pas tester les valeurs de repli. Vérifiez que votre design se dégrade correctement si une variable est manquante.

En savoir plus

Avancé : portée et héritage des variables

:root vs portée d'un élément

Les variables définies dans :root sont globales et accessibles partout. Vous pouvez aussi définir des variables sur des éléments spécifiques, et elles sont héritées par les descendants.

Exemple : définir --card-padding: 16px sur un élément .card. Tous les enfants de cette carte peuvent l'utiliser via var(--card-padding). C'est utile pour les design tokens limités aux composants.

Héritage des variables

Comme les propriétés de couleur et de police, les variables CSS s'héritent de parent à enfant. Un enfant qui ne définit pas --primary-color l'hérite du parent. Cela signifie que vous pouvez définir des variables en haut de l'arborescence DOM et les surcharger plus bas.

Variables dans les media queries

Les variables peuvent avoir des valeurs différentes dans différentes media queries. Définissez les variables dans :root pour le desktop, puis surchargez-les pour les points de rupture plus petits.

:root {
  --font-size-h1: 48px;
}

@media (max-width: 768px) {
  :root {
    --font-size-h1: 32px;
  }
}

C'est ainsi que fonctionnent les variables spécifiques aux points de rupture de Silex en coulisses.

Valeurs calculées

Les variables stockent la valeur exacte que vous leur assignez. Si vous définissez --spacing: 1em, c'est ce qui sera calculé -- cela ne se convertit pas en pixels. Cela peut être utile (la valeur s'adapte au contexte) ou déroutant (elle semble différente dans des contextes différents). Soyez intentionnel quant aux unités.

Référence : types de variables CSS dans Silex
Type Fonction Exemples de valeurs
Couleur Propriétés de couleur (arrière-plan, texte, bordures) #0066cc, rgba(0, 102, 204, 0.8), hsl(210, 100%, 50%)
Taille Dimensions, espacement, tailles de police, etc. 16px, 1em, 2rem, 50%, 24px
Typographie Familles de polices "Inter", sans-serif, "Georgia", serif

Toutes les variables sont stockées dans :root comme propriétés personnalisées CSS et sont héritées globalement sauf si elles sont surchargées à un point de rupture ou un élément spécifique.

Quiz

Q1 : Vous créez une variable --brand-color: #0066cc et l'appliquez à la couleur d'arrière-plan de cinq boutons. Plus tard vous changez la variable en #ff6600. Que se passe-t-il ?

  • A) Seul le premier bouton se met à jour ; vous devez mettre à jour les autres manuellement
  • B) Les cinq boutons se mettent à jour instantanément
  • C) Rien ne se passe ; les boutons sont déjà peints
  • D) Vous devez recréer la variable avec la nouvelle valeur
Réponse

B) Les cinq boutons se mettent à jour instantanément -- c'est la puissance des variables. Changez la valeur une fois, et tout ce qui l'utilise se met à jour partout.

Q2 : Vous voulez appliquer une variable CSS à une propriété, mais vous ne voyez pas le bouton + à côté. Pourquoi ?

  • A) Silex ne prend pas en charge les variables sur cette propriété
  • B) Vous n'avez pas encore créé de variable
  • C) Le type de la propriété ne correspond pas aux types de variables disponibles (couleur, taille, typographie)
  • D) Vous devez d'abord activer les variables dans les paramètres
Réponse

C) Le type de la propriété ne correspond pas aux types de variables disponibles -- si vous essayez d'appliquer une variable de couleur à une propriété de texte qui attend une valeur d'alignement, cela ne fonctionnera pas. Faites correspondre le type de variable au type de propriété.

Q3 : Vous définissez --spacing-sm: 8px au point de rupture desktop. Cela s'applique-t-il automatiquement au mobile ?

  • A) Non, vous devez la définir séparément pour chaque point de rupture
  • B) Oui, elle est héritée sauf si vous la surchargez pour le mobile
  • C) Uniquement si vous ajoutez une media query
  • D) Cela dépend s'il s'agit d'une variable de taille ou de couleur
Réponse

B) Oui, elle est héritée sauf si vous la surchargez pour le mobile -- les variables définies aux points de rupture plus larges se propagent aux plus petits. Vous n'avez besoin de surcharger que si vous voulez une valeur différente sur mobile.

Q4 : Quelle convention de nommage est la meilleure pour une variable qui contrôle votre couleur principale de marque ?

  • A) --blue
  • B) --dark-blue
  • C) --primary-color
  • D) --color-1
Réponse

C) --primary-color -- les noms sémantiques survivent aux changements de marque. Si vous choisissez plus tard une couleur différente pour votre marque principale, le nom --primary-color reste pertinent, mais --blue ou --dark-blue devient trompeur.

Q5 : Vous appliquez une variable var(--brand-color) à une propriété, mais vous avez mal orthographié le nom de la variable et elle n'existe pas. Que se passe-t-il ?

  • A) La propriété utilise une couleur de repli
  • B) Rien ne s'affiche ; la propriété est ignorée
  • C) L'éditeur affiche une erreur
  • D) La variable est créée automatiquement avec une valeur par défaut
Réponse

B) Rien ne s'affiche ; la propriété est ignorée -- les variables non définies font échouer la propriété silencieusement. Vérifiez toujours les noms de variables, ou utilisez une valeur de repli : var(--brand-color, #0066cc).

Éditer cette page sur GitLab