scss前置选择器到当前选择器 [英] scss prepend selector to current selector

问题描述

有没有一种方法可以将选择器直接添加到scss中的当前选择器。考虑以下内容：

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

是否可以添加 img 以便输出为 img.object-fit ？

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 & {
  }
}

但这会把它变成一个父子选择器： img .object-fit

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

通常的方法是在第二个选择器上附加& img ，但由于选择器前没有点，因此以不同的类名结尾： .object-fitimg

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?

推荐答案

如果您使用 @ at-root 和& 和内插语法：

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

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

您的输出将是：

img.object-fit{
  color: blue;
}

这篇关于scss前置选择器到当前选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！