otra clase en SCSS

161

tengo esto en mi archivo SCSS:otra clase en SCSS

.class-a{ 
    display: inline-block; 
    //some other properties 
    &:hover{ 
    color: darken(#FFFFFF, 10%); 
} 
} 

.class-b{ 

//Inherite class-a here 

//some properties 
}

En la clase-b, me gustaría inherite todas las propiedades y declaraciones anidadas de class-a. ¿Cómo se hace esto? Intenté usar @include class-a, pero eso arroja un error al compilar.

Fuente

2012-03-05 F21

364

Parece que @mixin y @include no son necesarios para un caso simple como esto.

Uno sólo puede hacer:

.myclass { 
    font-weight: bold; 
    font-size: 90px; 
} 

.myotherclass { 
    @extend .myclass; 
    color: #000000; 
}

Fuente

2012-03-07 03:48:17 F21

+21

@extend funciona bien, pero no funcionará si cualquiera de las clases está dentro de una directiva (generalmente una consulta de medios); a menos que ambos estén en la misma directiva. – MartinAnsty

Vea aquí algunos datos divertidos sobre '@ extend' - hay algunos efectos secundarios difíciles que usted debe tener en cuenta: http://stackoverflow.com/questions/30744625/sass-and-bootstrap-mixins-vs-extends/30744854# 30744854 –

Gracias @ToniLeigh, PlaceHolder de son interesantes, ya que ahorran fuera generación de un selector CSS ** ** adicional si el selector de matriz sólo se utiliza para extender (no utilizado en cualquier lugar). Al igual que en el ejemplo anterior '.myclass' no se utiliza en ningún otro lugar (supongo), aparte de' .myotherclass', entonces es mejor tener '.myclass' definido como'% myclass' y ampliado en '' como .myotherclass' @extend% myclass; '. Generará como '.myotherclass {font-weight: bold; font-size: 90px; color: # 000000; } ' – Abhijeet

Usando @extend es una buena solución, pero tenga en cuenta que la CSS compilado se romperá la definición de clase. Todas las clases que amplían el mismo marcador de posición se agruparán y las reglas que no se extienden en la clase estarán en una definición separada. Si varias clases se extienden, puede volverse ingobernable buscar un selector en el css compilado o en las herramientas de desarrollo. Mientras que un mixin duplicará el código de mezcla y agregará cualquier estilo adicional.

Se puede ver la diferencia entre @extend y @mixin en este sassmeister

Fuente

2017-05-20 22:01:14 Ari

Otra opción podría estar utilizando un selector de atributos:

[class^="your-class-name"]{ 
    //your style here 
}

Mientras que todas las clases que comienzan con "su nombre-clase-" usa este estilo

Así, en su caso, podría hacerlo de esta manera:

[class^="class"]{ 
    display: inline-block; 
    //some other properties 
    &:hover{ 
    color: darken(#FFFFFF, 10%); 
} 
} 

.class-b{ 
    //specifically for class b 
    width: 100px; 
    &:hover{ 
    color: darken(#FFFFFF, 20%); 
    } 
}

Más sobre selectores de atributos en w3Schools

Fuente

2017-06-06 10:19:33 Khanji

@extend .myclass; 
@extend #{'.my-class'};

Fuente

2018-01-03 12:21:54 mcmaxwell

Si bien este código puede responder a la pregunta, proporcionar un contexto adicional con respecto a por qué y/o cómo responde este código a la pregunta mejora su valor a largo plazo. – adiga

'' '@extend # {'. My-class', '.my-other-class'};' '' – iarroyo

Prueba esto, crear una clase base marcador de posición (% de base de clase) , amplíe su clase base (% my-base-class) con este marcador de posición. Ahora puede extender% clase base en cualquiera de sus clases (por ejemplo,% de mi clase).

%base-class { 
    width: 80%; 
    margin-left: 10%; 
    margin-right: 10%; 
} 

.my-base-class { 
    @extend %base-class; 
} 

.my-class { 
    @extend $base-class; 
    margin-bottom: 40px; 
}

Fuente

2018-01-26 15:22:53 Ashwin

Respuesta

Cuestiones relacionadas