带有父选择器的 BEM 嵌套 SCSS 会破坏 Sublime Text 语法突出显示？

Posted 2023-02-23

【中文标题】带有父选择器的 BEM 嵌套 SCSS 会破坏 Sublime Text 语法突出显示？

【英文标题】：BEM nesting SCSS with parent selectors breaks Sublime Text syntax highlighting?

【发布时间】：2014-11-08 11:10:16

【问题描述】：

我正在一个使用 SCSS 的项目中试验 BEM 语法。我的编辑器是 Sublime Text 3，我正在使用 SCSS 语法高亮。

我遇到的问题是，当我按照this article by Mike Fowler 使用& 父选择器嵌套时，Sublime 将其突出显示为红色。这是一个例子：

代码编译得很好，我只是希望 Sublime 不要将这些标记为错误。

谁能帮助配置 Sublime 来做到这一点？

【参考方案1】：

我建议使用Syntax Highlighting for Sass 包进行语法高亮。使用它和 Neon Color Scheme，它完全支持 Sass 包的语法突出显示中的所有范围（免责声明：我是主题的维护者），您的代码如下所示：

没有错误（绿色是类名，& 被识别为特殊的 SASS/SCSS 符号）。我不确定您当前使用哪个包进行 SCSS 突出显示，但它显然无法识别前导 -- 字符或前导 __ 字符之后的任何内容是有效的。切换到新的语法高亮包应该会有所帮助。

【讨论】：

Sass 包的语法高亮是我需要的答案。我一直在使用 SCSS 包，它与 &-someRule 选择器语法不匹配。 SCSS 包对连字符规则有更好的自动完成功能（例如background-color），所以我现在串联使用这两个包。

【参考方案2】：

当我遇到这个问题时，我通过选择 View>Syntax>SASS>SCSS 解决了这个问题。这显然是由下载原始 SASS 包 Sublime 引起的。