Variables CSS

Bootstrap inclut environ deux douzaines de propriétés personnalisées CSS (variables) dans son CSS compilé, avec des dizaines d'autres en cours pour une personnalisation améliorée par composant. Ceux-ci offrent un accès facile aux valeurs couramment utilisées telles que nos couleurs de thème, nos points d'arrêt et nos piles de polices principales lorsque vous travaillez dans l'inspecteur de votre navigateur, un bac à sable de code ou un prototypage général.

Toutes nos propriétés personnalisées sont préfixées parbs- pour éviter les conflits avec des CSS tiers.

Variables racine

Voici les variables que nous incluons (notez que le :rootest obligatoire) qui sont accessibles partout où le CSS de Bootstrap est chargé. Ils se trouvent dans notre _root.scssfichier et sont inclus dans nos fichiers dist compilés.

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

Variables de composant

Nous commençons également à utiliser des propriétés personnalisées comme variables locales pour divers composants. De cette façon, nous pouvons réduire notre CSS compilé, nous assurer que les styles ne sont pas hérités dans des endroits comme les tables imbriquées, et permettre un restylage et une extension de base des composants Bootstrap après la compilation Sass.

Consultez notre documentation sur les tableaux pour avoir un aperçu de la façon dont nous utilisons les variables CSS .

Nous utilisons également des variables CSS dans nos grilles, principalement pour les gouttières, avec une utilisation accrue des composants à l'avenir.

Exemples

Les variables CSS offrent une flexibilité similaire aux variables de Sass, mais sans avoir besoin de compilation avant d'être servies au navigateur. Par exemple, ici, nous réinitialisons les styles de police et de lien de notre page avec des variables CSS.

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}