Incluindo outra classe no SCSS

309

Eu tenho isso no meu arquivo SCSS:

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

.class-b{

 //Inherite class-a here

 //some properties
}

Na classe b, gostaria de herdar todas as propriedades e declarações aninhadas de class-a. Como isso é feito? Eu tentei usar @include class-a, mas isso apenas gera um erro ao compilar.

inheritance sass F21
fonte

Respostas:

624

Parece @mixine @includenão é necessário para um caso simples como este.

Pode-se apenas fazer:

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

.myotherclass {
  @extend .myclass;
  color: #000000;
}
F21
fonte
40
@extend funciona bem, mas não funcionará se uma das classes estiver dentro de uma diretiva (geralmente uma consulta de mídia); a menos que ambos estejam na mesma diretiva.
31813 MartinForst
13
veja aqui alguns fatos divertidos sobre @extend- há alguns efeitos colaterais complicados você deve estar ciente: stackoverflow.com/questions/30744625/...
Toni Leigh
2
Obrigado @ToniLeigh, o PlaceHolder's é interessante, pois economiza a geração de um seletor CSS adicional se o seletor pai for usado apenas para estender (não usado em nenhum lugar). Como no exemplo acima, .myclassnão é usado em nenhum outro lugar (suponho) além de .myotherclass, então é melhor ter .myclassdefinido como %myclasse estendido em .myotherclasscomo @extend %myclass;. .myotherclass{ font-weight: bold; font-size: 90px; color: #000000; }
Gerará
5
Exemplo de uso do Place Place Vs Exemplo de uso do seletor de classe normal
Abhijeet
@MartinAnsty Bem, isso é péssimo.
Abram
51

Tente o seguinte:

  1. Crie uma classe base de espaço reservado (% base-class) com as propriedades comuns
  2. Estenda sua classe (.my-base-class) com este espaço reservado.

  3. Agora você pode estender% da classe base em qualquer uma das suas classes (por exemplo, minha classe).

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

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

.my-class {
    @extend %base-class;
    margin-bottom: 40px;
}
Ashwin
fonte
Eu acho que essa resposta é a mesma que a mais popular. Estou certo?
Yevgeniy Afanasyev 23/10
1
@Yevgeniy Afanasyev Não, você não estende uma classe diretamente, mas pode estender diretamente um espaço reservado.
Ashwin
Nunca foi perguntado :(
Yevgeniy Afanasyev 24/10
1
@Yevgeniy Afanasyev, estendendo a classe diretamente (resposta mais popular) não funcionou para mim, mas estendendo um espaço reservado fez o trabalho. Por isso, postei a resposta, pois não é a mesma resposta.
Ashwin
3
Obrigado por postar uma resposta alternativa, mas não está claro em sua resposta por que precisamos dela. Se você puder adicionar mais argumentos para esclarecer um caso de uso ou as vantagens dessa abordagem, isso será apreciado. Obrigado.
Yevgeniy Afanasyev 24/10
16

Usar @extend é uma boa solução, mas esteja ciente de que o css compilado interromperá a definição de classe. Quaisquer classes que estendem o mesmo espaço reservado serão agrupadas e as regras que não forem estendidas na classe estarão em uma definição separada. Se várias classes forem estendidas, pode ser indisciplinado procurar um seletor nas ferramentas css compiladas ou nas ferramentas de desenvolvimento. Enquanto um mixin duplicará o código do mixin e adicionará outros estilos.

Você pode ver a diferença entre @extend e @mixin neste sassmeister

Ari
fonte
O link sassmeister está quebrado.
LexieHankins
11 
@extend .myclass;
@extend #{'.my-class'};
mcmaxwell
fonte
22
Embora esse código possa responder à pergunta, fornecer um contexto adicional sobre por que e / ou como esse código responde à pergunta melhora seu valor a longo prazo.
Adiga
2
@extend #{'.my-class', '.my-other-class'};
Iarroyo
2
Qual é o significado do hashbang aqui?
Konrad Viltersten
7

Outra opção poderia estar usando um Seletor de Atributos:

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

Enquanto todas as classes que começam com "nome-da-classe" usam esse estilo.

Portanto, no seu caso, você poderia fazer o seguinte:

[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%);
  }
}

Mais sobre os Seletores de Atributos no w3Schools

Khanji
fonte