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.

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;
}

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á


@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;
    }
    

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


O link sassmeister está quebrado.
LexieHankins

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

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.