SCSS: в чём разница между конструкциями `@mixin -> @include` и `%name -> @extend %name`?

175
02 февраля 2020, 20:00

В SCSS есть возможность объявить свойства в т.н. классе-шаблоне

%title {
  color: white;
  text-align: center;
}

и затем с помощью директивы @extend применять эти свойства к какому-либо элементу

h1 {
  @extend %title;
}

А можно сделать то же самое с помощью миксина

@mixin title {
  color: white;
  text-align: center;
}
h1 {
    @include title;
}

Результат в обоих случаях будет абсолютно идентичный. В чём же тогда разница между этими двумя конструкциями? И какую целесообразнее использовать?

Answer 1

с @extend медиа квери будет наследоваться, с include нет.

Думаю это ответ на 2 Ваших вопроса.

READ ALSO
передача массива в форме

передача массива в форме

Можно ли как то заставить передавать в форме массива (например таблицу)? Или для этого обязательно формировать данные отдельно и после ajax-ом...

186
Переместить объект при клике на него

Переместить объект при клике на него

В объект <div id="text"></div> добавляется не элемент, на который кликнули, а [object HTMLElement]В чём может быть проблема?

193
Медиа плеер с выбором стримера

Медиа плеер с выбором стримера

Чуть ниже представлена картинка на примере которой я буду объяснять что я хочу и хочу услышать ваши советы по тому как это можно реализовать

181
Переадресация с поддомена на домен

Переадресация с поддомена на домен

Подскажите, как лучше реализовать такую затеюЯ создаю поддомены своего домена, чтобы когда заходят на определенный (их будет несколько) поддомен,...

153