Что такое миксины и как с ними работать? Scss Примеры

Миксины – страшное слово которое лично меня с самого начала как-то даже пугало. Сперва, когда я решил все-таки подробно узнать, что это такое, то возникло двоякое чувство. Первое говорило мол, а зачем они я ведь могу и без них сделать все максимально четко, а вторая мысль проскакивала, круто это ведь можно писать меньше кода, который постоянно повторяется!

Но сейчас сомнений уже никаких не возникает, все значительно приятнее чем мне казалось изначально – ведь я не стою на месте, и как-то пытаюсь развиваться. Это значит, что те вещи, которые раньше казались не понятными и сложными сегодня уже обретают какой-то смысл и можно использовать так как мне это требуется.

Миксины – что это?

Часто их еще называют примесями, которые позволяют заранее определить стили которые можно будет использовать повторно. В целом туда можно вставлять как одно свойство, так и целое множество. Естественно ради одного свойства создавать целый миксин нет смысла, но если грамотно определить целый ряд всяких возможностей или построить какую-то удобную функцию то с этим можно в разы упростить процесс разработки.

Можно делать даже целые аргурменты у которых просто задаются свои дочерние значения. Я расскажу и покажу ниже как это все работает!

Как создать и использовать свой миксин?

Для начала, работа с миксином объявляется с @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

Если тебе понравилось, не забудь сделать репост, для того чтобы поделиться этой статьей! Этим ты поделишься с друзьями ну и добавишь мне плюсик в лице поисковых систем, ну а я естественно буду стараться для вас!

Метки: , ,

Оставьте комментарий