Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Миксины SASS: Основы

Важным оружием препроцессора SASS являются миксины. Также они ещё называются примеси. Это повторяющиеся участки кода, которые можно включать в различные селекторы. Звучит как шаблонные селекторы, правда? В своём базовом виде всё так и есть, но миксины имеют куда больше возможностей.

Для начала разберёмся с переиспользованием стилей. Создадим базовый миксин сброса стилей.

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

@mixin reset {
  margin: 0;
  padding: 0;
}

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

@mixin reset {
  margin: 0;
  padding: 0;
}

ul {
  @include reset;
}

После компиляции мы получим следующий CSS-код:

ul {
  margin: 0;
  padding: 0;
}

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

@mixin flex-between {
  display: flex;
  justify-content: space-between;
}

@mixin reset {
  margin: 0;
  padding: 0;
}

@mixin horizontal-menu {
  @include reset;
  @include flex-between;

  list-style: none;

  .menu-item {
    margin: 0 10px;
  }
}

.menu {
  &.horizontal-menu {
    @include horizontal-menu;
  }
}

Обратите внимание, что внутри миксина horizontal-menu мы подключили два вышестоящих миксина и потом использовали его для стилизации нашего меню. Все стили из миксинов flex-between и reset окажутся внутри миксина horizontal-menu. Конечный CSS-код будет выглядеть следующим образом:

.menu.horizontal-menu {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.menu.horizontal-menu .menu-item {
  margin: 0 10px;
}

Препроцессор работает последовательно, поэтому порядок включения миксинов может иметь значение в некоторых случаях. Не забывайте следить за этим. А также не забывайте следить за уровнем вложенности миксинов. Хоть SASS и позволяет включать миксины друг в друга, но не советую делать это на большой глубине. Чем больше уровней включений миксинов, тем меньше контроля мы имеем за стилями. Миксины в первую очередь предназначены для облегчения написания повторного CSS-кода. Если вы чувствуете, что у вас появилась глубокая вложенность, то остановитесь, выдохните и подумайте — возможно некоторые стили стоит использовать без миксинов.

Миксины часто используются для свойств, которым необходима поддержка в старых браузерах. Для таких свойств указываются вендорные префиксы. Если мы используем свойство box-shadow и нам необходима поддержка старых браузеров, таких как Firefox 3.5, Chrome 9, Safari 4.3, то мы должны использовать вендорные префиксы -moz- и -webkit-. Для такого кода мы можем использовать миксины.

@mixin box-shadow-prefix {
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

.box-shadow {
  @include box-shadow-prefix;
}

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

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

Получить доступ
900
упражнения
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»