Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов. Миксины позволяют создавать группы деклараций CSS, которые вам придется использовать по нескольку раз на сайте. Вы даже можете передавать переменные в миксины, чтобы сделать их более гибкими. Так же хорошо использовать миксины для вендорных префиксов. Пример для transform:

index.sass

$link: orange

@mixin font//миксин
  font-size: 15px
  font-weight: bold

@mixin color
  color : #fff
  background-color: red
  @include font//вызов миксина в миксине

@mixin link-color
  a
    color: $link//использование переменных в миксине
    background-color: blue

body
  @include font
.test
  p
    span
      @include color
    @include link-color

$link: orange;
@mixin font {//миксин
  font-size: 15px;
  font-weight: bold;
}

@mixin color{
  color:#fff;
  background-color: red;
  @include font;//вызов миксина в миксине
}

@mixin link-color{
  a {
    color: $link;//использование переменных в миксине
    background-color: blue;
  }
}

body{
  @include font;
}
.test{
  p{
    span{
      @include color;
    }
    @include link-color;
  }
}

body {
  font-size: 15px;
  font-weight: bold; }

.test p span {
  color: #fff;
  background-color: red;
  font-size: 15px;
  font-weight: bold; }

.test p a {
  color: orange;
  background-color: blue; }
 

@import "minixs";//Подключение миксинов

.test{//Именованные параметры
   @include block($border: 1px solid red);
   width: 500px;
   height: 500px;
 }

@mixin rounded($radius){
  border-radius: $radius;
}

@mixin block($radius: 5px, $border: 1px solid black){
  @include rounded($radius);
  border: $border;
}

.test {
  border-radius: 5px;
  border: 1px solid red;
  width: 500px;
  height: 500px; }
 

@import "minixs";//Подключение миксинов

.test{//Именованные параметры
   @include block(13px , 1px solid red);
   width: 500px;
   height: 500px;
 }

@mixin rounded($radius){
  border-radius: $radius;
}

@mixin block($radius, $border){
  @include rounded($radius);
  border: $border;
}

.test {
  border-radius: 13px;
  border: 1px solid red;
  width: 500px;
  height: 500px; }
 

@import "minixs";//Подключение миксинов

.test3{//Параметры по умолчанию
  @include block();
  width: 500px;
  height: 500px;
}

@mixin rounded($radius){
  border-radius: $radius;
}
//Параметры по умолчанию
@mixin block($radius: 5px, $border: 1px solid black){
  @include rounded($radius);
  border: $border;
}

.test3 {
  border-radius: 5px;
  border: 1px solid black;
  width: 500px;
  height: 500px; }
 

.test2{//Именованные параметры
   @include block($radius: 20px);
   width: 500px;
   height: 500px;
 }

@mixin rounded($radius){
  border-radius: $radius;
}

@mixin block($radius: 5px, $border: 1px solid black){
  @include rounded($radius);
  border: $border;
}

.test2 {
  border-radius: 20px;
  border: 1px solid black;
  width: 500px;
  height: 500px; }

.test4{//Миксин с оператором рест
  @include box-shadow(1px 1px 1px #eee, 2px 2px 2px black);
}

@mixin box-shadow($shadows...){//Оператор рест
  box-shadow: $shadows;
}

.test4 {
  -webkit-box-shadow: 1px 1px 1px #eee, 2px 2px 2px black;
          box-shadow: 1px 1px 1px #eee, 2px 2px 2px black; }

Существует возможность передачи блока стилей в миксин, которые будут расположены среди стилей, подключаемых этим миксином. Эти стили будут размещены вместо директив @content, расположенных внутри миксина. Это даёт возможность создания абстракций, зависящих от конструкций селекторов или директив. Например:

@import "minixs";
ul{
    @include apply-ly{
      text-decoration: underline;
      padding: 5px;
      color: blue;
    }
 }

@mixin apply-ly{
  li{
    font-weight: bold;
    @content;
  }
}

ul li {
  font-weight: bold;
  text-decoration: underline;
  padding: 5px;
  color: blue; }