Sublime Text中.scss文件显示灰色是因为语法映射未正确配置，需确认版本支持、安装mrmlnc的SCSS插件、绑定.scss后缀至SCSS语法，并卸载冲突插件如Sass（erikzaadi）、SCSS（kuroir）等。
Sublime Text打开.scss文件全是灰色文字，选中代码没有颜色区分，变量、嵌套、注释全是一个色——这不是插件没装，是语法映射根本没接上，得先搞清你用的是哪个SCSS语法包、后缀有没有被正确识别、老插件有没有在后台捣乱。
确认Sublime版本与内置支持现状
打开Sublime Text → Help → About Sublime Text，查看版本号。v4.4+（含）及较新v3默认自带SCSS语法定义，但只对.scss后缀自动生效；.sass（缩进语法）常被识别为Plain Text——这一步跳过会导致后续所有设置白做。
右下角点击当前显示的语法名（如“Plain Text”）→ 若弹出菜单里有“SCSS”或“Sass”，说明内置语法已就位；若只有“Open all with current extension as…”且列表为空，说明你正被老插件劫持或后缀未注册。
安装正确的SCSS语法插件
方法一：通过Package Control安装（推荐）
按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）→ 输入 Package Control: Install Package → 回车 → 在搜索框输入 SCSS → 找到作者为 mrmlnc 的插件（图标是蓝底白花括号），点击安装。
立即学习“前端免费学习笔记（深入）”；
方法二：手动安装（网络受限时）
访问 GitHub 仓库 https://github.com/mrmlnc/sublime-scss → 点击绿色 Code 按钮 → Download ZIP → 解压 → 将文件夹重命名为 SCSS → 进入 Preferences → Browse Packages… → 把 SCSS 文件夹拖入打开的目录中。
【切勿安装名为 Sass、Sass Bundle、Origami 或 SCSS by kuroir 的插件】——这些是v3时代遗留包，会覆盖内置作用域规则，导致 $variable 高亮消失、@mixin 变成普通文本。
绑定.scss后缀到SCSS语法
第一步：关闭所有已打开的.scss文件
第二步：右键编辑器右下角当前语法名（如“Plain Text”）→ 选择 Open all with current extension as… → 在弹出列表中点击 SCSS
第三步：重新双击打开一个.scss文件 → 右下角应显示“SCSS”，且 $color、@include、& 等均有独立颜色
若仍显示“Plain Text”或“Sass”，说明你正在用.sass后缀写SCSS代码——【立刻把文件后缀从 .sass 改为 .scss】，这是最稳妥的兼容方案，社区工具链、构建系统、linters 全部认这个。
已打开的文件需手动右键 → Set Syntax → SCSS 才能即时生效，不改后缀只调语法名，下次打开还是灰的。
清理冲突插件
按 Ctrl+Shift+P → 输入 Package Control: Remove Package → 回车 → 逐个卸载以下名称插件：
• Sass（by erikzaadi）
• SCSS（by kuroir）
• Origami
• SassBuild
• SassBeautify
卸载后务必重启Sublime Text，或执行 Ctrl+Shift+P → Reload Syntax Definitions，否则旧作用域缓存仍在生效。
检查是否清理干净：打开 Preferences → Package Settings → Package Control → Settings – User → 查看 installed_packages 数组里是否还有上述插件名，有则手动删掉对应引号内的字符串并保存。
