Включая другой класс в 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, но это просто выдает ошибку при компиляции.

Ответы

Ответ 1

Похоже, @mixin и @include не нужны для простого случая, подобного этому.

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

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

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

Ответ 2

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

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

Ответ 3

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

[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