Объявление миксина

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

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

@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 
  }
}

@mixin clearfix
  display: inline-block

  &:after
    content: "."
    display: block
    height: 0
    clear: both
    visibility: hidden

  * html &
    height: 1px 

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