Как использовать Sass Mixins

Sass - невероятный инструмент разработки, который повышает производительность с легкостью решает сложные CSS задачи. В сегодняшней статье мы поговорим о Sass Mixins (примесях), и ответим на вопросы - что, зачем и как это использовать?

Если вы еще не знакомы с Sass, рекомендуем вам прочитать статью Изучаем Sass за 15 минут.

Что такое Sass Mixin?

Mixin представляет собой блок кода, который позволяет группировать CSS декларации, а затем повторно их использовать в любом месте проекта.

Ниже представлен пример в котором мы устанавливаем Flex элемент при помощи CSS.

.row {
    display: -webkit-flex;
    display: flex;
}

Представим что у нас на сайте существует множество элементов которые необходимо отображать как Flex контейнеры, и вам придется каждый раз вводить данные свойства, что в конечном итоге быстро надоест. В этом то нам и помогут Sass Примеси.

Создание Sass Примесей

Создание примесей очень просто, все что вам нужно сделать, это использовать команду @mixin, затем через пробел написать имя примеси, далее в фигурных скобках написать необходимые CSS декларации:

@mixin flex {
    // здесь пишем css код
    display: -webkit-flex;
    display: flex;
}

Теперь мы можем определять Flex контейнеры в любом месте нашего кода.

Использование Mixins

Теперь, когда мы знаем как объявлять Примеси, мы можем их использовать в нашем SCSS коде.

Для использования Примесей, нужно всего лишь использовать свойство @include с именем примеси в качестве значения.

.row {
    @include flex;
}

После компиляции CSS код будет выглядеть следующим образом:

.row {
    display: -webkit-flex;
    display: flex;
}

Передача аргументов в Mixins

Примеси также могут принимать аргументы, чтобы сделать вывод более динамичным. Например, предположим что мы строим систему сетки, и мы можем выбрать, следует ли использовать для макета модель Flexbox или Float.

Мы можем создать mixin, с определенным аргументом, чтобы был выбор между Flex и Float.

Создание примеси с аргументами происходит следующим образом:

@mixin grid($flex) {
    @if $flex {
        @include flex;
    } @else {
        display: block;
    }
}

Теперь когда мы вызываем grid, мы должны передать нужный аргумент:

@include grid(true);

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

@mixin grid($flex, $full-width) {
  // css
}

Создание аргументов по умолчанию

Как правило функции в языках программирования (SASS не исключение) позволяют задавать аргументы по умолчанию.

Синтаксис для передачи аргумента по умолчанию к Mixin выглядит следующим образом.

@mixin grid($flex: true) {
  // css
}

Мы можем передать любое количество переменных на свое усмотрение. Но переменная у которой уже установлен аргумент по умолчанию должна находится в конце списка аргументов.

Это означает, что вы не можете задавать аргументы в следующем порядке:

@mixin grid($flex: true, $max-width) {
  // css
}

В этом случае SCSS выдаст сообщение об ошибке Required argument $max-width must come before any optional arguments.

Аргументы переменные

В CSS у нас есть такие свойства как padding и margin которые могут принимать до четырех различных видов аргументов.

Пример:

a {
    padding: 10px;
    padding: 10px 20px;
    padding: 10px 20px 50px;
    padding: 10px 20px 50px 20px;
}

В SCSS также существуют списки. Значения свойства padding выше - тоже список. Есть способ сообщить Mixins рассматривать эти значения в качестве переменных вместо списка.

Для примера давайте создадим Mixin padding:

@mixin padding($values) {
    @each $var in $values {
        padding: #{$var};
    }
}

Если мы вызовем данный mixin @include padding(2px 4px 6px);, результат будет следующим:

a {
    padding: 2px;
    padding: 4px;
    padding: 6px;
}

Чтобы использовать эти переменные в качестве списка, мы добавляем ... после имени переменной.

@mixin padding($values...) {
    @each $var in $values {
        padding: #{$var};
    }
}

Теперь $values получает значения не в виде списка, а в качестве переменных.

a {
    @include padding(2px 4px 6px);
}

Получим следующий результат:

a {
    padding: 2px 4px 6px;
}

@content

@content позволяет расширить mixin. Мы можем передать блок кода в mixin используя @content.

@include grid() {
  // css
}

Для получения блока кода пишем следующим образом:

@mixin grid() {
    @content;
}

В качестве примера рассмотрим медиа-запросы:

@mixin small() {
    @media only screen and (max-width: 320px) {
        @content;
    }
}

Вместо того чтобы каждый раз вводить медиа запросы, мы можем использовать данную примесь.

@include small {
    // css
}

Заключение

Очевидно что SASS примеси очень полезны для разработки и позволяют ускорить рабочий процесс, существует множество примеров использования примесей. Ниже приведу пример самых популярных примесей с открытым исходным кодом.

  • Andy.scss - коллекция SCSS примесей.
  • SASS-MQ - Sass примеси для работы с медиа-запросами.
  • Bourbon - коллекция CSS примесей.
  • Family.scss - управление nth-child селекторами.
Перевод статьи How to Use Sass Mixins

Тэги: sassscssmixin

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.