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?

回答1:

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;
}

来源：https://stackoverflow.com/questions/58270726/scss-prepend-selector-to-current-selector