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

309

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

inheritance sass F21
источник

Ответы:

624

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

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

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

.myotherclass {
  @extend .myclass;
  color: #000000;
}
F21
источник
40
@extend работает нормально, но не будет работать, если один из классов находится в директиве (обычно медиа-запрос); если они оба не в одной директиве.
MartinAnsty
13
см. здесь некоторые забавные факты о @extend- есть некоторые хитрые побочные эффекты, о которых вы должны знать: stackoverflow.com/questions/30744625/…
Тони Ли,
2
Спасибо @ToniLeigh, PlaceHolder интересны тем, что они избавляют от генерации дополнительного CSS-селектора, если родительский селектор используется только для расширения (нигде не используется). Как в примере выше .myclass, не используется где-либо еще (я полагаю) кроме .myotherclass, тогда лучше .myclassопределить как %myclassи расширить .myotherclassкак @extend %myclass;. Это будет генерировать как.myotherclass{ font-weight: bold; font-size: 90px; color: #000000; }
Abhijeet
5
Пример использования Place Holder и Vs Пример использования обычного селектора класса
Abhijeet
@MartinAnsty Ну, это отстой.
Аврам
51

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

  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;
}
Ashwin
источник
Я думаю, что этот ответ такой же, как самый популярный. Я прав?
Евгений Афанасьев
1
@Yevgeniy Afanasyev Нет, вы не расширяете класс напрямую, но можете напрямую расширять заполнитель.
Эшвин
Никогда не спрашивали :(
Евгений Афанасьев
1
@ Евгений Афанасьев, прямое расширение класса (самый популярный ответ) не сработало для меня, но сработало заполнение. Поэтому я разместил ответ, так как это не тот же ответ.
Эшвин
3
Спасибо за публикацию альтернативного ответа, но из вашего ответа не ясно, зачем он нам нужен. Если вы можете добавить больше рассуждений, чтобы уточнить пример использования или преимущества этого подхода, это будет оценено. Спасибо.
Евгений Афанасьев
16

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

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

Ari
источник
Ссылка Засмейстера не работает.
LexieHankins
11 
@extend .myclass;
@extend #{'.my-class'};
mcmaxwell
источник
22
Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, почему и / или как этот код отвечает на вопрос, повышает его долгосрочную ценность.
адига
2
@extend #{'.my-class', '.my-other-class'};
Ярроё
2
В чем смысл хэшбанга здесь?
Конрад Вилтерстен
7

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

[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

Khanji
источник