Миксины – страшное слово которое лично меня с самого начала как-то даже пугало. Сперва, когда я решил все-таки подробно узнать, что это такое, то возникло двоякое чувство. Первое говорило мол, а зачем они я ведь могу и без них сделать все максимально четко, а вторая мысль проскакивала, круто это ведь можно писать меньше кода, который постоянно повторяется!
Но сейчас сомнений уже никаких не возникает, все значительно приятнее чем мне казалось изначально – ведь я не стою на месте, и как-то пытаюсь развиваться. Это значит, что те вещи, которые раньше казались не понятными и сложными сегодня уже обретают какой-то смысл и можно использовать так как мне это требуется.
Миксины – что это?
Часто их еще называют примесями, которые позволяют заранее определить стили которые можно будет использовать повторно. В целом туда можно вставлять как одно свойство, так и целое множество. Естественно ради одного свойства создавать целый миксин нет смысла, но если грамотно определить целый ряд всяких возможностей или построить какую-то удобную функцию то с этим можно в разы упростить процесс разработки.
Можно делать даже целые аргурменты у которых просто задаются свои дочерние значения. Я расскажу и покажу ниже как это все работает!
Как создать и использовать свой миксин?
Для начала, работа с миксином объявляется с @mixin
, после чего указывается название самого миксина, его свойства внутри ()
, ну и после фигурных скобок указывает сами значения. Самый простой миксин выглядит вот так:
@mixin beauty-border($color, $width) { border: $width solid $color; padding: 1em; } /* создали свой миксин scss */ .border { @include beauty-border(#ffaaff, 1px); } /* используем его */
В итоге все это скомпилируется в такой css стиль:
.border { border: 1px solid #ffaaff; padding: 1em; }
А теперь представь если тебе этот бордер пригодится с десяток раз? Это очень удобно, правда если миксины более сложные так как ради одного бордера с паддингом опять-таки нет смысла создавать это все. Кстати, выше я писал о том что можно писать аргументы.
Несколько слов об аргументах. Все мы знаем, что у некоторых свойств есть дочерние свойства. Так допустим у бордера есть еще с десяток свойств вот я сейчас и изменю тот миксин с учетом аргументов.
@mixin beauty-border($color, $width) { border: { color: $color; width: $width; style: solid; } padding: { left: 1em; right: 1em; top: 2em; bottom: 0; } } .border { @include beauty-border(#ffaaff, 1px); }
В итоге на выходе мы получаем следующий код:
.border { border-color: #ffaaff; border-width: 1px; border-style: solid; padding-left: 1em; padding-right: 1em; padding-top: 2em; padding-bottom: 0; }
Кстати, если ты еще плохо знаком с SCSS, то скорее всего первый вопрос у тебя возникает как запустить scss и работать с ним, я же лично работаю через удобнейшую программку prepros. Она сама компилирует все, а я на выходе уже получаю удобный css, если нужно даже в сжатом виде.
Можно даже делать некоторые значения по умолчанию те значения, которые задаются в качестве переменных:
@mixin beauty-border ($color, $width: 1px) { //.. }
Таким образом выходит, что если при использовании мы не зададим значение для переменной $width
, то автоматически подставится 1px
. Вот о чем я имею ввиду:
.p { @include beauty-border(blue); } // на выходе получится .p { border-color: blue; border-width: 1px; border-style: solid; }
Круто правда?
Вот так это все и работает! Тут добавить больше нечего, разве что в следующий раз мы рассмотрим то как работать с такими вещами как @IF
и @FOR
Если тебе понравилось, не забудь сделать репост, для того чтобы поделиться этой статьей! Этим ты поделишься с друзьями ну и добавишь мне плюсик в лице поисковых систем, ну а я естественно буду стараться для вас!
Метки: scss, адаптивная верстка, компиляция sass less scss