CODEWITHSUNDEEP
csssass
Pete
Pete

Reputation: 58412

scss prepend selector to current selector

Is there a way to prepend a selector directly to the current selector in scss. Consider the following:

.object-fit {
  object-fit: cover;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

is there a way to prepend img so that the output is img.object-fit?

The only way I have seen for prepending is to add & after like so:

.object-fit {
  img & {
  }
}

but this would turn it into a parent child selector: img .object-fit

The normal way would be just to append the second selector with &img but as this has no dot before the selector, that ends up with a different class name: .object-fitimg

So basically the question is is there anyway inside the object fit class to prepend a bare element selector?

Upvotes: 6

Views: 1233

Answers (2)

lkraav
lkraav

Reputation: 2827

Complete answer here is @at-root selector-append(), which will also work for multiple parent selectors.

Source: https://github.com/sass/sass/issues/2059#issuecomment-218862922

.object-fit,
.non-fit {
  @at-root #{selector-append("img", &)} {
    color: blue;
  }
}

Output

img.object-fit, img.non-fit {
  color: blue;
}

Upvotes: 1

ReSedano
ReSedano

Reputation: 5060

If you use @at-root and & with interpolation syntax: 

 .object-fit {
      @at-root img#{&} {
        color: blue;
      }
    }

Your output will be:

img.object-fit{
  color: blue;
}

Upvotes: 5

Related Questions