Миксины объявляются директивой @mixin. После неё должно стоять имя миксина и, опционально, его параметры, и блок, содержащий тело миксина. Например, можно определить миксин large-text следующим образом:

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

Миксины могут также содержать селекторы, возможно со свойствами. Селекторы даже могут содержать ссылки на родителя. Например:

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

По историческим причинам, имена миксинов (и всех других идентификаторов в Sass) могут содержать дефисы и символы подчёркивания как взаимозаменяемые символы. Например, если вы определяете миксин add-column, вы можете подключать его как add_column и наоборот.



На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter. Также отправить оповещение об ошибке можно, нажав на эту ссылку.