¿Puedo incluir una definición de css en otra definición de css?

Question

Así que digamos que he lo siguiente en 'foo.css':

.border { border : solid 1px; } 
#foo { color : #123; } 
#bar { color : #a00; } 

Ahora vamos a decir que tengo dos divs que quiero fronteras para, por lo que:

<div id="foo" class="border">Foo</div> 
<div id="bar" class="border">Bar</div> 

Esto funciona bien , pero me parece que la hora de definir y #foo #bar en mi archivo css, prefiero darles las características de .border de dar el div es la clase, así:

.border { border : solid 1px; } 
#foo { 
    <incantation to inherit from .border> 
    color : #123; 
} 
#bar { 
    <incantation to inherit from .border> 
    color : #a00; 
} 

y luego mi html wo uld simplemente sea:

<div id="foo">Foo</div> 
<div id="bar">Bar</div> 

¿Alguien sabe qué es ese conjuro mágico?

Answer 1

Usted podría estar interesado en mixins with Sass. Sass te permite escribir hojas de estilo CSS de una manera más eficiente, usando trucos como este. Mixins le permite definir un grupo de atributos (por ejemplo, para hacer con los bordes) y luego incluir esos atributos dentro de ciertas clases de css.

Answer 2

Eso no es compatible con css. Lo mejor que puede hacer es algo así como:

#foo, #bar, .border { border : solid 1px; } 
#foo { color : #123; } 
#bar { color : #a00; } 

Answer 3

Como dijo Wsanville, no puede usar la clase. Pero normal de la herencia CSS funciona - dijo si su html fue

<div class="border"> 
    <div id="foo"> 
     hello 
    </div> 
    <div id="bar"> 
     world 
    </div> 
</div> 

Se podría decir

.border {border: 1px solid #f00;} 
#foo {border:inherit;} 

que en algunos casos podría ser lo suficientemente bueno

Answer 4

Si usted está mirando para empujar a su Además, en lugar de utilizar algunos de los trucos descritos en las publicaciones anteriores, CSS debe buscar en los compiladores de CSS. Toman el código tipo CSS que has escrito, generalmente CSS con algunos trucos agregados, y los convierten en CSS normales para la web.

David Ziegler escribió acerca de algunas de las frescas compiladores CSS ofrecido ofrecen:

• variables - Los buenos programadores no les gusta a codificar. En muchos casos puede evitar esto en CSS usando una buena herencia, pero a veces es inevitable. Con las variables, cambiar su combinación de colores significa actualizar una variable en lugar de 13 atributos.

• Matemáticas - Esto va de la mano con las variables. Supongamos que su columna de la izquierda es de 100 px, su columna de la derecha es de 500 px y su div de envoltura es de 600 px. Bueno, tal vez decidas cambiarlo a 960px. ¿No sería maravilloso si el ancho de tus columnas se ajustara automáticamente? La respuesta es sí.

• Estilos anidados - Este es probablemente el más importante. CSS es plano, lo que significa que los sitios complejos terminan con CSS que es un dolor por atravesar.

Usted puede leer acerca de los compiladores populares en su blog post on the subject, o hacer algunas búsquedas y encontrar uno que funcione mejor para usted.