É possível no SASS herdar de uma classe em outro arquivo?

102

A pergunta diz quase tudo.

Por exemplo, se eu estivesse usando, digamos, Twitter Bootstrap , poderia definir classes em minha própria folha de estilo SASS que herdam das classes CSS do Bootstrap? Ou a herança no SASS só funciona no escopo de um único arquivo?

— Dan Tao
fonte

180

SIM! é possível.

Se você deseja que todos os <button>elementos herdem a .btnclasse dos botões padrão do Twitter Bootstrap

Em seu styles.scssarquivo, você deve primeiro importar _bootstrap.scss:

@import "_bootstrap.scss";

Então, abaixo da importação:

button { @extend .btn; }

— agustibr
fonte

Eu me sinto mal por fazer isso, já que as outras respostas praticamente responderam a essa pergunta (eu apenas esqueci de verificar novamente por um tempo e depois esqueci); mas estou aceitando sua resposta porque é a mais completa - ou seja, ela me conduz por todo o processo. Obrigado!

— Dan Tao

4

Isso funciona apenas com outros arquivos SCSS? Você não pode fazer isso com arquivos CSS?

— esmagamento

1

Tenha cuidado ao usar @extendjunto com bootstrap / qualquer estrutura, pois pode não funcionar como você espera. Há algumas coisas a serem

— observadas,

2

Mas isso não duplica o CSS de bootstrap.scss, se você fizer isso em vários arquivos em seu projeto?

— fritzmg

1

Será que este importar todo bootstrap.cssem styles.cssou apenas .btn? Quero dizer, no pacote de saída? Se importar inteiro bootstrap.css, aumentará o tamanho de styles.cssdesnecessariamente.

— maverick de

8

** Posso estar enganado, mas se eu entender o que você está tentando fazer, você não pode simplesmente usar o @extend .classname;comando dentro do elemento que deseja estender? Naturalmente, você só deve modificar seu próprio código para preservar a capacidade de atualização.

— Mark Ernst
fonte

2

Pelo que sei , você deve usar@import o arquivo que contém as classes que deseja usar em seu arquivo SASS para poder utilizá-las nesse arquivo. No entanto, não sou um especialista em SASS / SCSS, então alguém pode saber de outra maneira de usá-los remotamente que eu não conheço.

— ScottS
fonte

1

Assim como a resposta aceita mostrou que isso é possível com @import, no entanto @import foi substituído por sass

A equipe Sass desencoraja o uso contínuo da regra @import. Sass irá gradualmente eliminá-lo ao longo dos próximos anos e, eventualmente, removê-lo inteiramente da linguagem. Em vez disso, prefira a regra @use.

A regra @use é mais adequada para uso agora, uma vez que não polui o escopo do módulo de importação (usuário). infelizmente, no momento em que este artigo foi escrito, a regra de uso só estava implementada no Dart sass.

— ehab
fonte