¿Es posible en SASS heredar de una clase en otro archivo?

102

La pregunta prácticamente lo dice todo.

Por ejemplo, si estuviera usando, digamos, Twitter Bootstrap , ¿podría definir clases en mi propia hoja de estilo SASS que hereden de las clases CSS de Bootstrap? ¿O la herencia en SASS solo funciona dentro del alcance de un solo archivo?

— Dan Tao
fuente

180

¡SI! Es posible.

Si desea que todos los <button>elementos hereden la .btnclase de los botones predeterminados de Twitter Bootstrap

En su styles.scssarchivo, primero tendría que importar _bootstrap.scss:

@import "_bootstrap.scss";

Luego, debajo de la importación:

button { @extend .btn; }

— agustibr
fuente

Me siento mal por hacer esto ya que las otras respuestas prácticamente respondieron esta pregunta (simplemente me olvidé de revisar por un tiempo y luego lo olvidé); pero acepto su respuesta porque es la más completa, es decir, me guía a través de todo el proceso. ¡Gracias!

— Dan Tao

4

¿Esto solo funciona con otros archivos SCSS? ¿No puedes hacer esto con archivos CSS?

— aplastar el

1

Tenga cuidado cuando lo use @extendjunto con bootstrap / cualquier framework, ya que puede no funcionar como espera. Hay algunas cosas a tener en cuenta como se describe en esta publicación: stackoverflow.com/questions/30744625/…

— Patrik Affentranger

2

¿Pero esto no duplica el CSS de bootstrap.scss, si lo hace en varios archivos en su proyecto?

— Fritzmg

1

Hace esta importación del todo bootstrap.cssen styles.csso simplemente .btn? Quiero decir en el paquete de salida. Si se importa entero bootstrap.css, aumentará styles.cssinnecesariamente el tamaño de .

— Maverick

8

** Podría estar equivocado, pero si entiendo lo que está tratando de hacer, ¿no puede simplemente usar el @extend .classname;comando dentro del elemento que desea extender? Naturalmente, solo debe modificar su propio código para preservar la capacidad de actualización.

— Mark Ernst
fuente

2

Que yo sepa, debe usar@import el archivo que contiene las clases que desea usar en su archivo SASS para poder utilizarlas en ese archivo. Sin embargo, no soy un experto en SASS / SCSS, por lo que alguien puede conocer otra forma de usarlos de forma remota que yo no conozco.

— ScottS
fuente

1

Así como la respuesta aceptada ha demostrado que esto es posible con @import, sin embargo, @import ha sido desaprobado por sass

El equipo de Sass desaconseja el uso continuo de la regla @import. Sass lo eliminará gradualmente durante los próximos años y, finalmente, lo eliminará del idioma por completo. En su lugar, prefiere la regla @use.

La regla @use es más adecuada para su uso ahora, ya que no contamina el alcance del módulo de importación (usuario). Desafortunadamente, en el momento de escribir este artículo, la regla de uso solo se implementa en Dart sass.

— ehab
fuente