web-dev-qa-db-fra.com

Bootstrap 4 - Référencez une couleur par nom de racine dans css

J'utilise un thème Nice Bootstrap 4 css qui remplace celui par défaut avec des couleurs très Nice mais je ne suis pas en mesure de "référencer" une couleur par son nom racine à partir de css.

Expliquons mieux, Bootstrap a des couleurs racines dont les noms sont "success", "danger", "dark", "light" et ainsi de suite (et donc le modèle de thème personnalisé css), et - bien sûr, ils ont une représentation hexadécimale et j'aimerais appliquer une de ces couleurs à un survol de lien en l'appelant par son nom racine et non par son code hexadécimal.

Pour être plus clair, j'aimerais pouvoir faire quelque chose comme le suivant:

.dropdown-menu > a:hover {
  color: success; /*or dark or danger or whatever */
}

De cette façon, si je change le modèle à l'avenir, toutes les couleurs s'adapteront automatiquement aux nouvelles valeurs du modèle et toute l'apparence de l'application restera en "harmonie" avec le nouvel aspect général du modèle.

Je ne suis pas sûr que cela soit possible en utilisant du CSS pur, mais il existe peut-être une solution de contournement.

Comme vous le voyez, mon objectif est de pouvoir avoir autant de couleurs que je peux référencer par nom (disons dynamiquement au lieu d'utiliser statiquement hex) donc si je change le bootstrap modèle css toutes les couleurs ajuster automatiquement aux nouvelles valeurs de modèle.

Une aide/des idées?

htmlcssbootstrap-4
8
Diego Perez

Ce sont Variables CSS . Vous pouvez les référencer comme ...

.dropdown-menu > a:hover {
  color: var(--success);
}

https://www.codeply.com/go/vFE9n0VrGz

Connexes: CSS utilise la couleur d'une autre classe?

10
Zim

Vous pouvez le définir plus tôt dans le code et l'appeler comme indiqué ci-dessous

:root {
  --success: #66CD00;
}

.dropdown-menu > a:hover {
  background-color: var(--success);
}
0
IJ D

Les variables CSS ne sont pas entièrement prises en charge:

Puis-je utiliser des variables CSS?

Vous pouvez utiliser Sass ou Less par exemple, définir des variables lors du codage, puis les compiler en un simple CSS supporté par tous les navigateurs.

Remarque: Bootstrap 4 a été écrit en utilisant Sass (fichiers .scss)

0
Itay Gal