scss 中的反向查找选择器

Question

我们有一个像这样的 scss 结构：

.some {

  margin: 10px;

  &__other {

    color: red;

  }

}

当悬停&__othervscode 时，告诉我我可以使用该类.some__other来使用下面描述的规则，但是进行反向查找是相当困难的。如果我在 html 中查看类，就像<a href="/" class="some__other"></a>不可能使用项目中的 find 来定位类，some__other因为它在源文件中不作为单个字符串存在。但是由于 vscode 知道如何组合 scss 规则来形成结果选择器，是否有可能以某种方式搜索它们的位置？或者也许有一个扩展允许这样做？

Answer 1

您可以使用正则表达式/.some.*&__other/gms进行搜索，该表达式将为您提供从 a.some到 a 的所有匹配项&__other。这是一个非常宽的网，你会撒网，所以准备好捕捉很多不需要的东西。

Answer 2

SASS 编译器可以配置为生成源映射。你是如何做到这一点取决于具体哪个SASS编译器所使用。当源映射存在时，浏览器的 DOM Inspector 中的开发人员工具将显示原始 SASS 文件的文件名和行号，而不是生成的 CSS 文件。