Многие разработчики, которые часто пишут 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, чтобы узнать о других замечательных функциях, которыми вы можете пользоваться.