Pregunta ¿Puede una clase CSS heredar una o más clases diferentes?


Me siento tonto por haber sido un programador web por tanto tiempo y sin saber la respuesta a esta pregunta, realmente espero que sea posible y simplemente no supe más que lo que creo que es la respuesta (que es que no es posible) .

Mi pregunta es si es posible crear una clase de CSS que "herede" de otra clase de CSS (o más de uno).

Por ejemplo, digamos que tuvimos:

.something { display:inline }
.else      { background:red }

Lo que me gustaría hacer es algo como esto:

.composite 
{
   .something;
   .else
}

donde la clase ".composite" se mostraría en línea y tendría un fondo rojo


619
2018-06-30 19:10


origen


Respuestas:


Hay herramientas como MENOS, que le permiten componer CSS a un nivel más alto de abstracción similar a lo que describe.

Menos llamadas estos "Mixins"

En lugar de

/* CSS */
#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

Tu puedes decir

/* LESS */
.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

377
2018-06-30 19:18



Puede agregar varias clases a un solo elemento DOM, p. Ej.

<div class="firstClass secondClass thirdclass fourthclass"></div>

La herencia no es parte del estándar CSS.


254
2018-06-30 19:14



Sí, pero no exactamente con esa sintaxis.

.composite,
.something { display:inline }

.composite,
.else      { background:red }

91
2017-11-28 18:30



Un elemento puede tomar múltiples clases:

.classOne { font-weight: bold; }
.classTwo { font-famiy:  verdana; }

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>

Y eso es lo más cerca que llegarás desafortunadamente. Me encantaría ver esta característica, junto con alias de clase algún día.


47
2018-06-30 19:12



Mantenga sus atributos comunes juntos y asigne atributos específicos (o invalide) nuevamente.

/*  ------------------------------------------------------------------------------ */   
/*  Headings */ 
/*  ------------------------------------------------------------------------------ */   
h1, h2, h3, h4
{
    font-family         : myfind-bold;
    color               : #4C4C4C;
    display:inline-block;
    width:900px;
    text-align:left;
    background-image: linear-gradient(0,   #F4F4F4, #FEFEFE);/* IE6 & IE7 */
}

h1  
{
    font-size           : 300%;
    padding             : 45px 40px 45px 0px;
}

h2
{
    font-size           : 200%;
    padding             : 30px 25px 30px 0px;
}

46
2017-11-14 03:09



No, no puedes hacer algo como

.composite 
{
   .something;
   .else
}

Esto no son nombres de "clase" en el sentido OO. .something y .else son simplemente selectores nada más.

Pero puedes especificar dos clases en un elemento

<div class="something else">...</div>

o puede buscar en otra forma de herencia

.foo {
  background-color: white;
  color: black;
}

.bar {
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}
<div class="foo">
  <p class="bar">Hello, world</p>
</div>

Donde los párrafos color de fondo y color se heredan de la configuración en el div que está .foo labrado Es posible que deba verificar la especificación W3C exacta. inherit es el predeterminado para la mayoría de las propiedades de todos modos, pero no para todos.


38
2018-06-30 19:19



Me encontré con este mismo problema y terminé usando una solución JQuery para que pareciera que una clase puede heredar otras clases.

<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>

Esto encontrará todos los elementos con la clase "compuesta" y agregará las clases "algo" y "otro" a los elementos. Así que algo así como <div class="composite">...</div> terminará así:
  <div class="composite something else">...</div>


24
2017-10-23 21:52



los SCSS camino para el ejemplo dado, sería algo así como:

.something {
  display: inline
}
.else {
  background: red
}

.composite {
  @extend .something;
  @extend .else;
}

Más información, revisa el conocimientos básicos sass


13
2018-03-31 19:24



No lo olvides

div.something.else {

    // will only style a div with both, not just one or the other

}

10
2018-06-30 19:48