Включая еще один класс в SCSS

Question

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

Answer 1

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

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

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

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

Answer 2

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

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

3. Теперь вы можете расширять% base-class в любом из ваших классов (например, .my-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;
   }
   

Answer 3

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

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

Answer 4

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

[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

Answer 5

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