Примеси
Примеси (или миксины, от англ. mixin) — одна из самых могучих штук в Sass и по своему действию напоминают функции в языках программирования. Иными словами, это фрагмент кода, который можно вставлять несколько раз. При этом примеси обладают рядом возможностей:
- в качестве значений можно передавать переменные, что придаёт примесям гибкость;
- существуют библиотеки примесей вроде Bourbon, в которых реализовано множество готовых типовых задач;
- примеси можно вынести в отдельный файл и подгружать их по мере необходимости через команду @import . Код при этом сокращается и упрощается.
Использование примесей
Для создания примеси используется команда @mixin , после которой через пробел идёт произвольное имя. Внутри в фигурных скобках пишем стилевые правила. В том месте, куда нам надо вставить примесь, добавляем команду @include с её именем.
@mixin my_opacity < -webkit-transition: opacity 1s ease-in; -moz-transition: opacity 1s ease-in; transition: opacity 1s ease-in; >.block < height: 100px; background: #fc0; >.block:hover
На выходе получим следующий CSS.
.block < height: 100px; background: #fc0; >.block:hover
Переменные в примесях
Примеси хороши уже сами по себе, поскольку оптимизируют стилевой код. Но часто требуется вызывать несколько раз похожий фрагмент кода, который различается лишь одним-двумя значениями. Тогда нам опять помогут примеси, потому что они могут включать в себя параметры, а их значения подставляются в заданных местах кода. Получается, что написав один раз примесь, мы можем вызывать её неоднократно, лишь меняя значения параметров.
В примере ниже мы создаём примесь с именем box, у которой три параметра с именами $width, $color и $bg. Для параметра $bg зададим также значение по умолчанию, тогда не придётся указывать его в обязательном порядке.
Далее к селектору добавляем примесь через команду @include . Внутри скобок пишем желаемые значения, их может быть три или два, ведь цвет фона задан по умолчанию.
@mixin box($width, $color, $bg: #f0f0f0) < border: $width solid $color; padding: 20px; background: $bg; >.block
На выходе мы получим следующий результат.
.block
Такого рода примеси удобно применять для вендорных свойств. Это свойства с префиксами -moz, -webkit, -ms работающие только в определённом браузере. Например, сделаем примесь, которая разбивает текст на заданное число колонок. Старые версии браузеров не понимают свойство columns , поэтому для них мы продублируем это свойство с префиксами, как показано ниже.
@mixin column($count, $width) < -webkit-columns: $count $width; -moz-columns: $count $width; columns: $count $width; >.page
На выходе мы получим следующее.
.page
Как видно, примеси позволяют хранить повторяющийся код в одном месте, легко редактировать его и при желании изменять параметры.
См. также
Основы Sass: команда mixin
Урок #4 — Использование миксинов
Для сокращения кода в SASS используются специальные шаблоны со свойствами — миксины. В ходе урока вы научитесь создавать миксины, передавать в них параметры, а также использовать их для различных объектов.
Видеоурок
Миксины в SASS выполняют роль шаблона данных, который можно подключить к блоку, тем самым добавив в него множество стилей из шаблона.
Для создания миксина используйте ключевое слово @mixin :
@mixin someName < // Здесь код и различные стили >Миксины не срабатывают без явного подключения, поэтому сейчас в файле CSS ничего не поменяется. Для подключения миксина используйте ключевое слово @include .
#block
Также в миксины можно передавать параметры. Для этого после имени миксина пропишите круглые скобки ( ) , после чего в них пропишите параметры, которые будут переданы в него.
Миксины
Миксины (часто используется название примеси) позволяют определить стили, которые могут быть использованы повторно в любом месте документа без необходимости прибегать к несемантическим классам вроде .float-left. Миксины также могут содержать целые CSS правила или что-либо другое, разрешённое в Sass документе. Они даже могут принимать аргументы, что позволяет создавать большое разнообразие стилей при помощи небольшого количества миксинов.
Миксин
Миксин (дословно: «примесь) — класс (class) или интерфейс, в котором некоторые или все его методы (methods) и/или свойства (properties) не реализованы, требуя, чтобы другой класс или интерфейс обеспечивал недостающие реализации. Новый класс или интерфейс затем включает в себя как свойства и методы из миксина, так и те, которые он определяет сам. Все методы и свойства используются совершенно одинаково, независимо от того, реализованы ли они в миксине, интерфейсе или классе, реализующем миксин.
Преимущество миксинов заключается в том, что они могут быть использованы для упрощения проектирования API, в которых несколько интерфейсов должны включать одни и те же методы и свойства.
Например, миксин WindowOrWorkerGlobalScope используется для предоставления методов и свойств, которые должны быть доступны как в интерфейсах Window , так и в интерфейсах WorkerGlobalScope (en-US). Миксин осуществляется с помощью обоих этих интерфейсов.
Узнать больше
General knowledge
- Mixin on Wikipedia
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 12 нояб. 2023 г. by MDN contributors.
Your blueprint for a better internet.