Міксини (часто використовується назва домішки) дозволяють визначити стилі, які можуть бути використані повторно в будь-якому місці документа без необхідності вдаватися до несемантичних класів на кшталт .float-left. 

Міксини також можуть містити цілі CSS правила або що-небудь інше, дозволене в Sass документі. Вони навіть можуть приймати аргументи, що дозволяє створювати велику різноманітність стилів за допомогою невеликої кількості Міксини

Міксини оголошуються директивою @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 
  }
}

Міксини викликаються в документ директивою @include. Вона приймає ім'я міксина і, опціонально, аргументи, що передаються в нього, включає стилі, певні цим Міксинам, в дане правило

Міксини можуть набувати значень як аргументи, які передаються при підключенні міксина і стають доступними як змінні всередині нього. При визначенні міксина, аргументи пишуться як імена змінних, розділені комами всередині круглих дужок відразу після імені.

 Потім, при підключенні міксина, значення можуть бути передані аналогічним чином. наприклад:

@mixin border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { 
  @include border(blue, 1in);
}

Іноді має сенс міксину або функції приймати невідому кількість аргументів. Наприклад, міксин для створення тіні блоку може приймати будь-яку кількість значень тіні:

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

Приклад застосування міксінів:

See the Pen mixin-scss by kravets (@raisa69) on CodePen.

h