SASS Миксины: Урок 4 — Простое создание и использование

Миксины в SASS — мощный инструмент для создания и повторного использования блоков CSS-стилей. Они позволяют создавать шаблоны стилей, применяемые к различным элементам, избегая дублирования кода.

Создание простого миксина

Для создания миксина используется синтаксис SASS: символ @, за которым следует ключевое слово mixin, и имя миксина (например, font-styles). Фигурные скобки {…} определяют стили.

Пример создания миксина font-styles:

@mixin font-styles {
  font-size: 1.1em;
  font-weight: bold;
  font-family: Arial, sans-serif;
  color: #333;
}

Миксин сам по себе не изменяет CSS. Это шаблон, видимый только внутри файлов SASS или SCSS. Для применения миксина используется синтаксис @include имя_миксина.

Подключение миксина

Пример подключения миксина font-styles к ссылке внутри тега <li>:

li a {
  @include font-styles;
  color: blue;
}

После компиляции в CSS стили миксина будут применены к ссылке, но последующее переопределение color: blue; перезапишет значение цвета из миксина. В скомпилированном CSS-файле миксин будет развернут.

li a {
  font-size: 1.1em;
  font-weight: bold;
  font-family: Arial, sans-serif;
  color: blue;
}

Миксин можно использовать многократно:

li {
  @include font-styles;
}

В этом случае стили миксина применяются ко всем элементам <li>.

Переменные и параметры в миксинах

Миксины поддерживают переменные и параметры, что делает их гибкими.

Переменные

$font-size: 1.1em;

@mixin font-styles {
  font-size: $font-size;
  font-weight: bold;
  font-family: Arial, sans-serif;
  color: #333;
}

Параметры

Параметры указываются в круглых скобках после имени миксина:

@mixin font-styles($color, $font-weight) {
  font-size: 1.1em;
  font-weight: $font-weight;
  font-family: Arial, sans-serif;
  color: $color;
}

li a {
  @include font-styles(blue, bold);
}

a {
  @include font-styles(#333, light);
}

При вызове параметры передаются в указанном порядке. Порядок можно изменить, явно указав имена параметров:

li a {
  @include font-styles($font-weight: bold, $color: blue);
}

Значения по умолчанию

Можно задавать значения параметров по умолчанию:

@mixin font-styles($color: red, $font-weight: bold) {
  font-size: 1.1em;
  font-weight: $font-weight;
  font-family: Arial, sans-serif;
  color: $color;
}

Если параметр не указан, используется значение по умолчанию.

Неограниченное количество параметров

Для приема неограниченного количества параметров используется синтаксис с тремя точками:

@mixin padding-all(...) {
  padding: $args;
}

.element {
  @include padding-all(10px, 20px, 10px, 20px);
}

Переданные параметры объединяются в строку, присваиваемую переменной $args.

Комбинация обычных и неограниченных параметров:

@mixin style-element($color, ...) {
  color: $color;
  padding: $args;
}

Миксины SASS — эффективный инструмент для организации и повторного использования стилей, сокращающий объем кода и повышающий его читаемость. Использование переменных и параметров позволяет создавать гибкие и многоразовые компоненты стилей.