Вложение sass / scss с использованием атрибута class начинается с

Question

У меня есть следующие scss / sass:

.c-slider {
  $parent: &;
  [class^=c-slider-thumb]{
  #{$parent}__item {
    margin-left:0;
  }
}
}

Я получаю следующую ошибку:

expected "]".
  stdin 3:9  root stylesheet on line 3 at column 9

Я хочу достичь:

 [class^=c-slider-thumb]{ 
  .c-slider__item{
    margin-left:0;
  }
}

Какможно сделать?

Answer 1

Вот как вы можете этого достичь

.c-slider {
  $parent: &;
  @at-root [class^=c-slider-thumb]{
  #{$parent}__item {
    margin-left:0;
    }
  }
}

Ваш результат будет

[class^=c-slider-thumb] .c-slider__item {
  margin-left: 0;
}