Включение другого класса в SCSS

у меня есть это в моем файле SCSS:

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

.class-b{

 //Inherite class-a here

 //some properties
}

в классе-b я хотел бы наследовать все свойства и вложенные объявления class-a. Как это делается? Я пробовал использовать @include class-a, но это просто вызывает ошибку при компиляции.

196
inheritance sass

5 ответов

выглядит так:@mixin и @include не нужны для простого случая, как этот.

можно просто сделать:

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

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

попробуйте это:

  1. создайте базовый класс-заполнитель (%base-class) с общим свойства
  2. Расширьте свой класс (.my-base-class) с этим заполнителем.

  3. теперь вы можете расширить % base-class в любом из ваших классов (например .мой-класс).

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

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

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

использование @extend является прекрасным решением, но имейте в виду, что скомпилированный css разобьет определение класса. Любые классы, которые расширяют один и тот же заполнитель, будут сгруппированы вместе, а правила, которые не расширяются в классе, будут в отдельном определении. Если несколько классов становятся расширенными, может стать непослушным искать селектор в скомпилированном css или инструментах разработки. В то время как mixin будет дублировать код mixin и добавлять любые дополнительные стили.

вы можете увидеть разница между @extend и @mixin в этом sassmeister

9

другой вариант может использовать селектор атрибутов:

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

тогда как каждый класс, начинающийся с "your-class-name", использует этот стиль.

Так что в вашем случае вы можете сделать это так:

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

подробнее о селекторах атрибутов w3Schools

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