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 à un élément 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).

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 Font Family -- les familles de polices pour des caractères cohérents

Cliquez sur + New variable et choisissez son type (Color, Size ou Font Family) 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 l'icône crayon (Use variable) à côté du nom d'une propriété. Elle n'apparaît que s'il existe au moins une variable du type de la propriété : une variable Color pour Background color, Color et les autres couleurs, une variable Size pour Width, chaque côté de Margin et de Padding, Font size et les autres tailles, une variable Font Family pour Font family. Cliquez dessus pour ouvrir la liste de ces variables. Sélectionnez-en une, et la propriété utilise désormais var(--nom-de-variable) au lieu d'une valeur codée en dur : le champ affiche le nom de la variable.

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 :

Ouvrez la boîte de dialogue CSS Variables
Sélectionnez ou créez une variable
Sur la ligne de la variable, tapez la valeur dans la colonne de l'appareil : Desktop, Tablet, Mobile Landscape…

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 :

Définissez toutes les couleurs comme variables dans :root (thème clair) : dans la fenêtre CSS Variables, + New variable > Color, puis tapez le nom et la valeur Desktop
Utilisez des noms sémantiques comme --bg-primary, --text-primary
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¶

MDN : Propriétés personnalisées CSS (Variables) -- référence complète
MDN : Fonction var() -- utiliser les variables en CSS
Dark Mode for Websites -- votez pour le basculement de thème en temps réel
Couleurs et arrière-plans -- là où les variables sont le plus souvent utilisées
Typographie -- polices variables et familles de polices

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 à un élément.

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 l'icône crayon (Use variable) à côté. Pourquoi ?

A) Silex ne prend pas en charge les variables sur cette propriété
B) Vous devez d'abord taper var() dans le champ
C) Il n'existe pas encore de variable du type de la propriété (couleur, taille, famille de police)
D) Vous devez d'abord activer les variables dans les paramètres

Réponse

C) Il n'existe pas encore de variable du type de la propriété -- l'icône crayon n'apparaît que s'il existe une variable du bon type : créez une variable Color pour l'utiliser sur une couleur, une variable Size sur une taille. Une propriété qui attend une autre sorte de valeur, comme un alignement, n'a pas d'icône crayon.

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