Créer une variable dans le fichier .CSS à utiliser dans ce fichier .CSS

Question

Dupliquer possible:
Eviter les constantes répétées en CSS

Nous avons des "couleurs de thème" qui sont réutilisées dans notre feuille CSS.

Est-il possible de définir une variable et de la réutiliser ensuite?

Par exemple

 .css
OurColor: Blue

{ H1
 color:OurColor;
}
 

Answer 1

Il n'est pas nécessaire que tous les styles d'un sélecteur résident dans une seule règle, et une seule règle peut s'appliquer à plusieurs sélecteurs ... alors retournez-la :

 /* Theme color: text */
H1, P, TABLE, UL
{ color: blue; }

/* Theme color: emphasis */
B, I, STRONG, EM
{ color: #00006F; }

/* ... */

/* Theme font: header */
H1, H2, H3, H4, H5, H6
{ font-family: Comic Sans MS; }

/* ... */

/* H1-specific styles */
H1
{ 
   font-size: 2em; 
   margin-bottom: 1em;
}
 

De cette manière, vous évitez de répéter des styles qui sont conceptuellement identiques, tout en précisant les parties du document qu’ils affectent.

Answer 2

Vous pouvez y parvenir et bien plus encore en utilisant Less CSS .

Answer 3

Non, mais Sass . C'est un préprocesseur CSS, vous permettant d'utiliser tout un tas de raccourcis pour réduire la quantité de CSS que vous avez besoin d'écrire.

Par exemple:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Au-delà de variables, il offre la possibilité d'imbriquer des sélecteurs, garder les choses logiquement regroupées:

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

Il y a plus: mixin qui agissent un peu comme des fonctions, et la possibilité d'hériter d'un sélecteur à partir d'un autre. C'est très astucieux et très utiles.

Si vous codez en Ruby on Rails, ça va encore compiler automatiquement à CSS pour vous, mais il y a aussi un objectif général de compilateur qui peut le faire pour vous sur demande.

Answer 4

Vous n'êtes pas le premier à vous demander et la réponse est non. Elliotte a un bon discours sur ce sujet: http://cafe.elharo.com/web/css-repeats-itself/ . Vous pouvez utiliser JSP, ou son équivalent, pour générer le CSS au moment de l'exécution.

Answer 5

CSS n'offre pas une telle chose. La seule solution consiste à écrire un script de prétraitement exécuté manuellement pour générer une sortie CSS statique basée sur un pseudo-CSS dynamique ou connecté au serveur Web et prétraitant le CSS avant de l'envoyer au client.