Справочник DESIGN/HTML/CSS

Мой Справочник | CSS3 | SCSS - Миксины

Примеси

Ещё одна интересная возможность SCSS — примеси. Мы можем «примешивать» содержимое одного CSS-правила в другое. Для этого нужно написать имя «примешиваемого» правила внутри другого правила. Рассмотрим пример:

 
/* объявление примеси */
@mixin white { color: white; }
/* применение примеси */
.text { @include white; }

/* Эти выражения дают один
и тот же результат: */
.mixin();
.mixin;

/* В LESS: */
//объявление примеси:
.some_name() { ... }

//применение примеси:
.selector {
   .some_name();
   ...
}
 		Если примеси никуда не вложены, то сами по себе они НЕ КОМПИЛИРУЮТСЯ
Несколько примесей 
@mixin big {
  width: 500px;
}

@mixin white {
  color: white;
}

.block {
  @include big;
  @include white;
}

/* Результат: */
.block {
  width: 500px;
  color: white;
}
 		К одному правилу можно применить несколько примесей одновременно. В таком случае примеси просто «вызываются» по очереди.
Примесь с параметром 
@mixin margin(@value) {
  margin-top: @value;
  margin-bottom: @value;
}

.block {
  @include margin(10px);
}

/* Результат: */
.block {
  margin-top: 10px;
  margin-bottom: 10px;
}
 		Параметры позволяют сделать примеси более универсальными.
Примесь с параметром и значенем 
/* Примесь с параметром и значением по ум. */
@mixin big(@size: 500px) {
  width: @size;
}

/* Передаётся значение параметра по ум. */
.block {
  /* width: 500px;*/
  @include big;
}

/* Передаётся другое значение */
.block {
  /* width: 100px; */
  @include big(100px);
}
 		Параметризованные примеси можно сделать ещё универсальнее. Параметру примеси можно задать значение по умолчанию. Оно указывается через двоеточие после названия параметра. Если в примесь при применении параметр не передаётся, то используется значение по умолчанию. Рассмотрим пример, в котором значение параметра по умолчанию указано, но не задействуется, так как в примесь передаётся явный параметр.
Примеси с несколькими параметрами 
@mixin offset(@padding; @margin) {
  padding: @padding;
  margin: @margin;
}

.block {
  @include offset(5px; 10px);
}

/* Результат: */
.block {
  padding: 5px;
  margin: 10px;
}
В примесь можно передавать несколько параметров. Параметры перечисляются через запятую , или через точку с запятой ;. Рекомендуется использовать точку с запятой.
Примеси - шаблоны 
/* Обычная примесь */
@mixin set-font-size(@size) {
  font-size: @size;
}

/* Примесь-шаблон (smaller -
название шаблона) */
@mixin set-font-size(smaller; @size) {
  font-size: @size / 2;
}

.set-font-size(bigger; @size) {
  font-size: @size * 2;
}

.text   {@include set-font-size(100px); }
.s-text {@include set-font-size(smaller; 100px);}
.x-text {@include set-font-size(bigger; 100px);}

/* Результат: */
.text   { font-size: 100px; }
.s-text { font-size: 50px; }
.x-text { font-size: 200px; }
Можно вызывать эту примесь с названием шаблона и без него и, в зависимости от этого, получать соответствующие результаты.Таким образом можно для схожих действий не создавать несколько примесей с разными названиями. Лучше делать шаблоны одной примеси и просто вызывать её с дополнительным параметром. Давайте попробуем создать шаблон примеси и применить её для окраски монстров.

У примесей может быть несколько шаблонов, с разными названиями
Универсальный шаблон 
.font-size(bigger; @size)  {
  font-size: @size * 2;
}

.font-size(smaller; @size) {
  font-size: @size / 2;
}

/* Универсальный шаблон: */
@mixin font-size(@_; @size) {
  color: #000;
  width: auto;
  min-height: 100px;
}


.content-bigger {
  @include font-size(bigger, 20px);
}

.content-smaller {
  @include font-size(smaller, 20px);
}


/* Результат: */
.content-bigger {
  font-size: 40px;
  color: #000;
  width: auto;
  min-height: 100px;
}

.content-smaller {
  font-size: 10px;
  color: #000;
  width: auto;
  min-height: 100px;
}
Если нужно задать общие свойства для нескольких шаблонов одной и той же примеси, можно создать универсальный шаблон.
В качестве имени в универсальный шаблон передаётся специальная переменная @_, за ней следуют параметры. Важно, чтобы универсальный шаблон принимал те же параметры, что и все остальные шаблоны.

Разработчик: Евгений Леухин
EvgenyLeukhin@yandex.ru

© 2016 - 2021