Область видимости переменных и блоков контента

Блоки контента, переданные в миксин, вычисляются в той же области видимости, где определён этот блок, а не миксин. Это значит, что локальные переменные миксина не могут быть использованы в передаваемом блоке контента и переменные будут восприняты как глобальные:

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}

.colors {
  @include colors {
    color: $color;
  }
}

$color: white
@mixin colors($color: blue)
  background-color: $color
  @content
  border-color: $color

.colors
  @include colors
    color: $color

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

Кроме того, это означает, что переменные и миксины, которые используются в передаваемом блоке, зависят от других стилей, вблизи которых блок объявлен:

#sidebar {
  $sidebar-width: 300px;
  width: $sidebar-width;
  @include smartphone {
    width: $sidebar-width / 3;
  }
}

#sidebar
  $sidebar-width: 300px
  width: $sidebar-width
  @include smartphone
    width: $sidebar-width / 3