Variables CSS

Bootstrap inclut de nombreuses propriétés personnalisées CSS (variables) dans son CSS compilé pour une personnalisation en temps réel sans qu'il soit nécessaire de recompiler Sass. 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-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --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-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --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));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
}

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);
}

Points d'arrêt de la grille

Bien que nous incluions nos points d'arrêt de grille en tant que variables CSS (à l'exception de xs), sachez que les variables CSS ne fonctionnent pas dans les requêtes multimédias . Ceci est prévu dans la spécification CSS pour les variables, mais peut changer dans les années à venir avec la prise en charge des env()variables. Consultez cette réponse Stack Overflow pour quelques liens utiles. En attendant, vous pouvez utiliser ces variables dans d'autres situations CSS, ainsi que dans votre JavaScript.