CODEWITHSUNDEEP
sass
user3541631
user3541631

Reputation: 4008

Nesting sass/scss using class attribute starts with

I have the following scss/sass:

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

I receive the following error:

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

I want to achieve:

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

How can be done ?

Upvotes: 0

Views: 196

Answers (1)

Adel Elkhodary
Adel Elkhodary

Reputation: 1647

That's how you can achieve it

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

Your result will be

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

Upvotes: 1

Related Questions