Как работают сокращенные миксины в Sass

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

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

Давайте посмотрим, что дают миксины. Ниже вы найдете пример синтаксиса .sass. С ним мы и будем работать.

Примечание: Существует два типа расширений в Sass: .scss, в котором используются точки с запятой и фигурные скобки, и .sass, в котором эти символы не используются.

Исходные данные

Допустим, на вашей странице есть много компонентов (предположим, компонент корзины, размещенный в сетке). И эта корзина, или родительский компонент, содержит дочерние элементы, которые центрированы по горизонтали и по вертикали (как бы вы ни крутили этот родительский компонент, дочерние всегда будут центрированы таким образом).

Это одна из самых сложных вещей в истории CSS. Сколько существует хаков для ее достижения? Трудно поверить, но сегодня мы можем добиться этого всего тремя строчками кода!

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

Читайте также: Основы работы с CSS Flexbox

Самое замечательное в миксинах – то, что мы можем создать несколько миксинов для разных сценариев и просто менять их местами, когда это необходимо.

Код с обычными миксинами

Часто синтаксис, который мы используем для создания миксинов, выглядит примерно следующим образом:

@mixin center-content
  display: flex
  justify-content: center
  align-items: center

.parent-container
  @include center-content

Мы объявляем миксин с помощью ключевого слова @mixin, за которым следует имя миксина. После этого мы следуем стилям, которые будут применяться при его использовании.

Когда миксин нужен в коде, мы добавляем в класс ключевое слово @include, за которым следует имя миксина. Это компилируется так:

.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Код с сокращениями миксинов

Вместо ключевых слов @mixin и @include для объявления и включения миксина можно использовать символы = и + соответственно. Они применяются в качестве сокращений при использовании синтаксиса .sass.

Теперь мы можем сделать то же самое, что и выше, но используя сокращения:

=center-children
  display: flex
  justify-content: center
  align-items: center

.parent-container
  +center-children

Это просто более быстрый способ создать миксины. Приведенный выше код компилируется следующим образом:

.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Получается довольно аккуратно, правда? Существует очень много интересных приемов и вещей, которые вы можете сделать с помощью Sass, но все еще не можете с помощью CSS, хотя это быстро меняется. CSS начинает внедрять некоторые классные функции, которые есть в Sass, Less и Stylus, – например переменные CSS (настраиваемые свойства). Скоро в CSS даже должна появиться поддержка вложения.

Заключение

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