¿Importar estilos de selector de CSS en otro selector? (NO @import)

Question

¿Hay alguna forma de importar el estilo de un único selector de CSS en otro selector de CSS y agregarle o volver a escribir propiedades desde él?

Digamos:

.original_class{ 
background:black; 
color:white; 
} 
.overwrite{ 
@import(.original_class); /* I know this doesn't work */ 
color:blue; 
border:1px solid green; 
} 

puedo lograr esto con sólo redeclarandolos la .original_class y la asignación de nuevos valores (ya que los estilos CSS se vuelven a escribir de arriba a abajo), pero esto va a sustituir a los atributos de la original de CSS clase. Lo que quiero es heredar sus propiedades en otra clase sin tener que escribirlas de nuevo (duplicar).

Answer 1

No directamente, no.

Se podría hacer algo como esto en el código HTML:

<div class="original_class overwrite">...</div> 

Esto tendrá el mismo efecto, pero tendrá que hacer esto para cada elemento que desee estilo de esa manera.

También existe la opción de usar un preprocesador CSS, como SASS, que admite herencia/mixins.

Answer 2

Desafortunadamente no. Al menos no sin una de esas extravagantes complementos de CSS que no tocaría con un polo de una milla ...

Por supuesto, no hay nada que le impida tener múltiples clases en un solo elemento.

Answer 3

Si está dispuesto a tomar un pequeño desvío, tal vez this es algo para usted.

Answer 4

Puedes añadir el selector de .overwrite a la primera regla por la que lo separa del selector existente con una coma (grouping selectors), por lo que la regla de selección se convierte en .original_class, .overwrite:

.original_class, 
.overwrite { 
background: black; 
color: white; 
} 
.overwrite { 
color: blue; 
border: 1px solid green; 
} 

Además, cuando escribe:

esto va a sustituir a los atributos de la clase original de CSS

no existen atributos y clases en CSS, no con el significado previsto de OOP, supongo. Hay reglas, reglas de selector (para seleccionar HTML id, clases, elementos, atributos y otros pseudos), declaraciones, propiedades y valores.