Описание тега scss-mixins

Описание тега Вопросы с тегом

Миксины позволяют вам определять стили, которые можно повторно использовать в вашей таблице стилей.

Одно из наиболее важных применений миксинов - избегать использования несемантических классов, таких как .float-left.

Миксины определяются с помощью @mixin at-правила, которое написано

@mixin <name> { ... } or @mixin name(<arguments...>) { ... }

Имя миксина может быть любым идентификатором Sass, и оно может содержать любой оператор, кроме операторов верхнего уровня.

Пример миксина в SCSS:

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

Результат в CSS:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}