andead

@each $key, $color in $colors {
    $index: index($colors, $color);
    .test-#{$index}-#{$key} {
        color: $color;
    }
}

.btn,
.obr {
  display:block;
  @at-root {
    .btn {
      font-size: 24px;
    }
  }
}

$breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px);

@include media(">phone", "<=tablet") {
  width: 50%;
}

Escaping позволяют Вам использовать любую произвольную строку, как свойство или значение переменной. Абсолютно все внутри ~"anything" или ~'anything' используется без изменений

$tablet-widths: "(max-width: 320px)";
@media #{$tablet-widths} {
  width: 960px
}