CODEWITHSUNDEEP
csssass
omega
omega

Reputation: 43893

How to reference a parent but attach a tag to it in sass?

If I have this

.A {

}
input.A {

}

how can I use sass to factor out the parent .A? I tried

.A {

  input.& {

  } 
}

but it didn't work.

Upvotes: 1

Views: 40

Answers (1)

Harry
Harry

Reputation: 89780

Sass always seems to have a problem when appending the parent selector at the end. It doesn't have any problems when the parent selector is added at the start or in the middle.

One possible solution would be to use the @at-root directive. The @at-root directive tells compiler to move the selector to the root level (instead of being an inner nested block) and then appending the parent selector through selector interpolation produces the expected output.

.A {
  @at-root input#{&} {
    property: value;
  } 
}

(Using just selector interpolation without @at-root directive would end up producing .A input.A.)

Upvotes: 1

Related Questions