Référencement de CSS dans CSS

Question

Existe-t-il un moyen de définir une classe CSS comme étant égale à une autre? Par exemple, si j'avais une classe:

.myClass{ 
    background-color: blue; 
} 

est-il un moyen de définir une deuxième classe comme ayant le même style que myClass sans juste copier-coller?

EDIT:

Désolé, laissez-moi être un peu plus clair. Est-il possible de le faire après avoir déclaré le premier cours, peut-être même dans une autre feuille de style?

Answer 1

Oui, comme ceci:

.myClass, 
.mySecondClass, 
.myThirdClass { 
    background-color: blue; 
} 

EDIT:

En fonction de votre édition: Qu'est-ce que vous cherchez peut-être, si cela est quelque chose que vous voulez vraiment faire est de regarder dans SASS qui est essentiellement comme css mais avec des variables et des trucs. Mais vanilla CSS n'a aucun support natif pour ce que vous voulez.

Answer 2

.myClass, .myOtherClass{ 
    background-color: blue; 
} 

Answer 3

Pas avec CSS simple. Vous pouvez le faire en utilisant une technologie appelée SASS (http://sass-lang.com/), en utilisant la fonction @extend.

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend

Je pense MOINS a aussi cette capacité, mais je ne l'ai pas vérifié cela.

Answer 4

Envisagez-vous de créer une sorte de variables pour votre CSS? Si c'est le cas, vous devriez regarder dans SASS ou LESS.

deux qui permettent à des variables de style telles que:

/* sass/less css */ 
@color: #4D926F; 

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

/* rendered css */ 
#header { color: #4D926F; } 
h2 { color: #4D926F; } 

MOINS a également nested rules donc si vous avez des règles qui se chevauchent, vous n'avez pas constamment de les écrire sur et plus.

/* rendered css */ 
#header { color: black; } 
#header .navigation { 
    font-size: 12px; 
} 
#header .logo { 
    width: 300px; 
} 
#header .logo:hover { 
    text-decoration: none; 
} 

/* less css */ 
#header  { color: black; 
    .navigation { font-size: 12px } 
    .logo  { width: 300px; 
    &:hover { text-decoration: none } 
    } 
} 

espère que cela vous donne plus d'un point de départ :)