Javascript scs中的反向查找选择器
我们的scss结构如下:Javascript scs中的反向查找选择器,javascript,html,sass,visual-studio-code,Javascript,Html,Sass,Visual Studio Code,我们的scss结构如下: .some { margin: 10px; &__other { color: red; } } 当将鼠标悬停在&\uuu other上时,vscode会告诉我可以使用类。一些\uu other使用下面描述的规则,但反向查找相当困难。 如果我像查看那样查看html中的类,那么就不可能使用find in项目来定位类some\uu other,因为它不作为单个字符串存在于源文件中。但是,既然vscode知道如何组合scss规则以形成结果选择器,
.some {
margin: 10px;
&__other {
color: red;
}
}
当将鼠标悬停在&\uuu other
上时,vscode会告诉我可以使用类。一些\uu other
使用下面描述的规则,但反向查找相当困难。
如果我像查看
那样查看html中的类,那么就不可能使用find in项目来定位类some\uu other
,因为它不作为单个字符串存在于源文件中。但是,既然vscode知道如何组合scss规则以形成结果选择器,那么是否有可能对它们的位置执行搜索呢?或者可能有一个扩展允许这样做?可以将SASS编译器配置为生成一个
具体操作方法取决于您使用的SASS编译器
当存在源映射时,浏览器的DOM Inspector中的开发者工具将显示原始SASS文件的文件名和行号,而不是生成的CSS文件。您可以使用正则表达式
/.some.*&\uu other/gms
进行搜索,它将为您提供从.some
到&\uu other
的所有匹配项。这是一张非常宽的网,你将要撒网,所以要准备捕捉很多不需要的东西。这就是为什么使用实际的是一个好主意。直接使用一些其他的类选择器,而不是。一些{&\u其他}
,这几乎是不可能查找的。如果您需要共享规则,那么只需执行两个规则.some、.some_uuother{margin:10px;}
,然后执行.some_uother{color:red;}
@VLAZ我同意,但遗憾的是我无法控制样式的编写方式。这就是网站设计师喜欢做的。虽然这不能直接回答我的问题,但我接受了,因为这就是我们最终要做的。