如何在PhpStorm等IDE中通过CSS选择器定位SCSS代码行？

可以直接通过搜索body #test p定位到对应的SCSS代码，具体操作如下：

• 打开PhpStorm的查找功能：Windows/Linux用快捷键Ctrl+F，Mac用Cmd+F；若要全局搜索整个项目，使用Ctrl+Shift+F（Windows/Linux）或Cmd+Shift+F（Mac）
• 在搜索框输入目标选择器body #test p
• 确认SCSS文件在项目范围内，IDE会自动解析SCSS的嵌套结构，匹配对应的嵌套代码块
• 搜索结果会直接指向example.scss的第3行（即p{所在的代码行）

另外，PhpStorm对SCSS这类CSS预处理器支持完善，除了搜索定位，还可以按住Ctrl（Windows/Linux）或Cmd（Mac）点击编译后的选择器，直接跳转到SCSS源码中的对应位置。

内容的提问来源于stack exchange，提问作者Thibaut