Mini design system avec variables
Dans un projet réel, on regroupe les valeurs de design
dans des variables globales pour créer un système cohérent.
Voici un exemple de fichier _variables.scss typique :
// ====================================
// VARIABLES DE DESIGN
// ====================================
// --- Couleurs ---
$color-primary: #7aa7ff;
$color-primary-dark: #5a8fff;
$color-secondary: #ffb703;
$color-success: #10b981;
$color-danger: #ef4444;
// Palette de gris
$color-gray-50: #f9fafb;
$color-gray-100: #f3f4f6;
$color-gray-200: #e5e7eb;
$color-gray-900: #111827;
// Couleurs sémantiques
$color-text: $color-gray-900;
$color-background: $color-gray-50;
$color-border: $color-gray-200;
// --- Espacements ---
$space-unit: 4px;
$space-1: $space-unit; // 4px
$space-2: $space-unit * 2; // 8px
$space-3: $space-unit * 3; // 12px
$space-4: $space-unit * 4; // 16px
$space-6: $space-unit * 6; // 24px
// --- Typographie ---
$font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
$font-size-base: 16px;
$font-size-sm: 14px;
$font-size-lg: 18px;
$line-height-base: 1.6;
// --- Bordures ---
$border-radius-sm: 4px;
$border-radius-md: 8px;
$border-radius-lg: 12px;
$border-width: 1px;
// --- Ombres ---
$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
Ces variables peuvent ensuite être utilisées dans tout le projet :
// Import des variables (nous verrons cela au chapitre 6)
@use 'variables' as v;
.btn {
background: v.$color-primary;
color: white;
padding: v.$space-3 v.$space-4;
border-radius: v.$border-radius-md;
font-family: v.$font-family-base;
border: none;
box-shadow: v.$shadow-sm;
transition: all 0.2s ease;
}
.btn:hover {
background: v.$color-primary-dark;
box-shadow: v.$shadow-md;
}
Conseil terrain
En équipe, ces variables deviennent un langage commun
entre développeurs et designers. Un designer peut modifier
une valeur dans le fichier de variables, et tout le design
se met à jour automatiquement. C'est un énorme gain de temps
et de cohérence.
Variables conditionnelles et calculs
Les variables SCSS peuvent être utilisées dans des calculs
et être conditionnées. Cela permet une grande flexibilité.
$base-size: 16px;
$multiplier: 1.5;
// Calculs avec variables
$font-size-h1: $base-size * 2.5; // 40px
$font-size-h2: $base-size * 2; // 32px
$font-size-h3: $base-size * 1.75; // 28px
// Variables conditionnelles (avec des fonctions, que nous verrons plus tard)
$spacing-large: if($multiplier > 1, 24px, 16px);
.container {
max-width: $base-size * 60; // 960px
margin: 0 auto;
padding: $base-size * 1.5; // 24px
}