possible de définir une constante en css

Question

J'utilise quelques couleurs dans ma feuille de style CSS. Par exemple

 #testdiv{
  background: #123456;
}
 

Est-il possible de définir cette couleur par son nom afin que je puisse la référencer dans la fiche CSS comme ceci

 #testdiv{
  background: COLORNAME;
}
 

Answer 1

Pas avec des CSS simples, mais vous pouvez utiliser certaines extensions CSS, comme SASS ou less-css .

Voici un exemple de moins de CSS:

 @color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}
 

Answer 2

Il y a quelques propositions pour cela, donc cela pourrait arriver bientôt, mais rien n'a encore été standardisé à ma connaissance.

Le problème avec l'utilisation des classes CSS à cet égard est qu'elles ne sont d'aucune aide si vous souhaitez utiliser la même valeur pour différentes propriétés, par exemple si vous souhaitez utiliser une valeur de couleur particulière pour une bordure sur un élément et une couleur d'arrière-plan un autre.

Answer 3

Il est probablement préférable de définir une classe CSS et de la réutiliser sur chaque élément auquel vous souhaitez attribuer la couleur plutôt que de la coder pour un élément spécifique.

Ainsi:

 .darkBackground {
   background: #123456;
}

.smallText {
   font-size:8pt;
}
 

Il est également utile de savoir qu'un élément peut avoir plusieurs classes appliquées afin que vous puissiez répartir les valeurs de vos éléments "Constante" en classes distinctes et en appliquer plusieurs si nécessaire.

 <div id="myDiv1" class="darkBackground smallText"></div>
<div id="myDiv2" class="darkBackground bigText"></div>
 

Answer 4

Utilisez SASS ou moins .

Answer 5

Le standard de la façon de le faire est PHP. Ajouter un #define instructions au début de votre fichier CSS, comme

#define COLORNAME: #123456;

Au lieu de se lier au fichier CSS dans l'en-tête de votre fichier HTML, exécuter un script PHP à cet endroit. Le script charge le fichier CSS, remplace toutes les occurrences de COLORNAME par #123456 et les ruisseaux de la patché texte pour le client à l'aide d' echo ou print.

Alternativement, vous pouvez télécharger le fichier source (également à l'aide de PHP), utiliser le PHP pour créer un fichier CSS une fois où toutes les occurrences de #définit sont remplacés, et utiliser le fichier dans votre code HTML. C'est plus efficace, puisque vous êtes en train de faire la conversion en une seule fois, à la télécharger, au lieu de chaque fois que vous chargez le fichier HTML.