Основы синтаксиса миксинов в Sass

Development | Amber | Комментировать запись

Миксины Sass (реже их называют примесями) – это повторяющиеся фрагменты кода, которые вы можете включать в селекторы. Другими словами, миксины позволяют создавать повторно используемые группы объявлений. Это важная составляющая препроцессора. В своей основе миксины очень похожи на шаблонные селекторы, но их возможности гораздо шире.

В этом мануале мы на простом примере покажем, как писать миксины в Sass.

Для создания миксинов существует специальное ключевое слово @mixin, с помощью которого каждому миксину присваивается уникальное имя.

Хороший вариант использования миксина – код, в котором нужно применить много префиксов поставщиков. Вместо того чтобы писать их каждый раз сначала, вы можете просто закодировать их раз и навсегда, а потом просто вызвать в любом месте, где они нужны:

@mixin column-count($nb-columns) {
  -webkit-column-count: $nb-columns;
  -moz-column-count: $nb-columns;
  column-count: $nb-columns;
}

// вызов миксина:
.two-columns { @include column-count(2); }

Чтобы вызвать миксин, используется ключевое слово @include, которое принимает имя миксина.

Приведенный выше фрагмент выдаст следующий CSS:

.two-columns {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

Вы также можете вкладывать одни миксины в другие (при этом важно соблюдать порядок миксинов, иначе препроцессор может неправильно их обработать).

Читайте также: Как использовать Pug и Sass с flutter-view