Включая другой class в SCSS

У меня это в моем файле SCSS:

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

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

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

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

 .myclass { font-weight: bold; font-size: 90px; } .myotherclass { @extend .myclass; color: #000000; } 

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

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

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

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

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

В то время как каждый class, начинающийся с «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

 @extend .myclass; @extend #{'.my-class'}; 
  • Метод базового вызова Java из базового конструктора
  • Почему в Java нет множественного наследования, но допускается реализация нескольких интерфейсов?
  • Является ли ключевое слово 'override' просто проверкой переопределенного виртуального метода?
  • Переопределение частных методов в Java
  • Есть ли какой-либо реальный риск для получения из контейнеров STL C ++?
  • Во время выполнения найдите все classы в приложении Java, которые расширяют базовый class
  • Наследование classа case Scala
  • Нужно ли ВСЕ использовать виртуальные функции в производных classах?
  • Хорошие причины запретить наследование Java?
  • Наследование наследования проекта Maven - нужно ли указывать родительскую версию?
  • Разница между новыми и отменой
  • Давайте будем гением компьютера.