Это старая версия документа!

---

Миксины (примеси)

Некоторые вещи в 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; }