Variables CSS

Variables globales

Définir des variables au niveau racine

CSS

:root {
    --color-primary: #111;
    --space-md: 1rem;
}

Utiliser une variable globale

CSS

.box {
    color: var(--color-primary);
}

Variantes possibles : couleurs, tailles, spacing.

Variables locales

Définir une variable dans un composant

CSS

.card {
    --card-bg: #fafafa;
    background: var(--card-bg);
}

Redéfinir localement

CSS

.card-dark {
    --card-bg: #111;
}

Variantes possibles : override local.

Variables imbriquées

Variable dépendante d’une autre

CSS

:root {
    --base: 1rem;
    --space-lg: calc(var(--base) * 2);
}

Autre dépendance

CSS

:root {
    --radius: 8px;
    --radius-lg: calc(var(--radius) * 2);
}

Variantes possibles : calc, clamp.

Thèmes

Thème clair

CSS

:root {
    --bg: #fff;
    --fg: #111;
}

Thème sombre

CSS

[data-theme="dark"] {
    --bg: #111;
    --fg: #fff;
}

Variantes possibles : data-theme, classes.

Variables de composant

Personnaliser un bouton

CSS

.btn {
    --btn-bg: #111;
    --btn-fg: #fff;
    background: var(--btn-bg);
    color: var(--btn-fg);
}

Modifier un bouton secondaire

CSS

.btn-secondary {
    --btn-bg: #eee;
    --btn-fg: #111;
}

Variantes possibles : bg, fg, radius.

Typographie

Taille fluide

CSS

:root {
    --fs-base: clamp(1rem, 2vw, 1.25rem);
}

Police variable

CSS

:root { --fw: 600; }

.title { font-weight: var(--fw); }

Variantes possibles : clamp, min, max.

Spacing

Échelle de spacing

CSS

:root {
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
}

Utiliser l’échelle

CSS

.stack > * + * {
    margin-top: var(--space-3);
}

Variantes possibles : spacing modulaire.

Radius

Échelle de radius

CSS

:root {
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 16px;
}

Utiliser un radius

CSS

.box { border-radius: var(--r-md); }

Variantes possibles : sm, md, lg.

Transitions

Durée de transition globale

CSS

:root { --t: 0.2s; }

Utiliser la durée

CSS

.btn {
    transition: background var(--t);
}

Variantes possibles : t, easing.

Variables avancées

Variable avec clamp

CSS

:root {
    --fs-fluid: clamp(1rem, 2vw, 2rem);
}

Variable avec calc

CSS

:root {
    --box-size: calc(100% - 2rem);
}

Variantes possibles : calc, clamp, min, max.

Variables rares

Variable pour media query

CSS

@media (min-width: 600px) {
    :root {
        --layout: row;
    }
}

Variable pour animation

CSS

:root {
    --spin: 360deg;
}

.icon {
    transform: rotate(var(--spin));
}

Variantes possibles : angles, durées.