2010-03-13 4 views
2

Je cherchais à joindre 2 styles ensemble pour faire un super style pour une utilisation facile et la personnalisation de ma page.Est-ce que je peux joindre 2+ styles ensemble dans une superstyle?

Est-il possible de définir quelque chose comme ça? (Si oui, comment)

.bold { font-weight: bold;} 
.color1 {color: white;} 

.boldColor {.bold; .color1;} 

where .boldColor is effectively 

.boldColor {font-weight:bold; color:white;} 

Je veux ce que je puisse avoir des styles thoughout la page et être en mesure de changer facilement les couleurs dans de nombreux endroits en 1 place. Je suis actuellement en utilisant <p class="bold color"> mais certains de mes defs de classe sont de plus en temps et je voudrais pouvoir utiliser <p class="boldColor">

Merci

Répondre

6

Vous ne pouvez pas faire exactement ce que vous demandez, mais vous pouvez obtenir des effets similaires en utilisant une virgule pour séparer plusieurs sélecteurs CSS qui partagent les mêmes propriétés.

.bold, .boldColor { 
    font-weight: bold; 
} 

.color1, .boldColor { 
    color: white; 
} 

De cette façon class="boldColor" aura le même effet que class="color1 bold".

0

Non, la spécification CSS ne supporte pas.

3

Ceci n'est pas possible en utilisant un CSS normal. Vous le feriez généralement, comme vous le dites déjà, en combinant les noms de classes: bold color

Il existe des "pré-compilateurs" CSS qui peuvent faire des choses avancées sur les feuilles de style CSS, comme travailler avec des variables. Je n'en connais aucune qui fasse des "fusions de classe" comme vous le demandez mais je suis sûr qu'ils peuvent aider à réduire la taille du code. Découvrez LESS et xCSS, par exemple.

+0

et CleverCSS! http://sandbox.pocoo.org/clevercss – myfreeweb

+0

+1 lesscss peut faire quelque chose comme '.class {#id; } '. Agréable! –

0

Non, vous ne pouvez pas faire cela. Comment vous le faites actuellement est idéal.

Questions connexes