Всем привет! В этом материале рассмотрим, что такое миксины в Sass и где их использовать .
Всем привет! В этом материале рассмотрим, что такое миксины в Sass и где их использовать.
Если вы знаете какой-нибудь язык программирования, например, javascript, то можете создать для себя следующую ассоциацию: миксины в sass – это конструкторы в javascript. Давайте рассмотрим подробнее.
Думаю, сначала рассмотрим синтаксис, а уже затем способы применения.
Синтаксис
Чтобы задать миксин в sass, нужно просто написать @mixin и название.
@mixin border-radius($radius: 20px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
Здесь мы создали миксин с именем border-radius, который будет задавать соотвествующее свойство, приписывая нужные префиксы.
Использовать миксины так же несложно, нужно просто написать @include и имя миксина, передав в скобках нужные аргументы. Если вы не зададите аргумент, то будет использовано значение по умолчанию. В нашем случае – это 20px.
.block {
@include border-radius(30px);
}
Применение
Как вы уже, наверное, догадались, миксины представляют собой что-то вроде функций, которые могут принимать какие-то аргументы и что-то с ними делать. Таким образом, миксины используются для автоматического подставления префиксов, перевода значений из px в rem, для написания кроссбраузерных свойств и так далее. Применений огромное множество. Если вы знаете, зачем нужны функции в языках программирования, то, думаю, вы разберетесь, где использовать миксины.
Если же вы не совсем уверены, что правильно понимаете предназначение функций в языках программирования, советую обратить внимание на курс Создание и Раскрутка сайта от А до Я.
А у меня на этом все. Спасибо за внимание!
