В этой записи будет предоставлен пример SASS mixin для border-radius.

Предисловие

Если вы сюда зашли, то вам скорее всего уже известно, что такое mixin. А если нет, то это участок кода, который может быть многократно использован во всем CSS коде.

Например я часто использую закругления краев (border-radius) для элементов и чтобы не прописывать одно и тоже в 50 местах, я создам mixin, который я смогу подключить где мне нужно.

SASS border-radius mixin

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

И чтобы потом воспользоваться этим mixin вам нужно сделать так:

.box { @include border-radius(10px); }

И теперь у .box будет прописаны все свойства mixin border-radius. И теперь после компиляции SCSS файла, .box пример такой вид:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Если вам не нравятся 10px, вы можете прописать другие значения, например % или em и тд.

Послесловие

В чем плюсы? Плюсы в том, что это дает возможность:

• уменьшить громоздкость вашего SCSS
• ускорить процесс разработки

На этом все. Если у вас остались какие-либо вопросы — задавайте их ниже пол этой запись — я буду рад вам помочь.

Источник.