sublime text 可通过插件与配置支持 scss/sass 开发。1. 安装 sass 插件以实现语法高亮与代码折叠；2. 配置 build system 使用 sass 编译器实现本地编译；3. 按模块化结构组织项目提升开发效率；4. 利用 emmet、sublimelinter 等插件增强编码体验。
Sublime Text 本身并不直接支持 SCSS 或 SASS 的语法高亮和编译，但通过一些插件和配置，可以很好地支持这两种 CSS 预处理器语言，提升模块化开发效率。下面介绍几个关键步骤，让你的 Sublime 支持 SCSS 和 SASS，并能更高效地进行样式编写。
安装 SCSS/SASS 语法支持插件
默认情况下，Sublime 对 .scss 和 .sass 文件的识别可能不准确，比如没有正确的语法高亮或代码折叠功能。
你可以通过 Package Control 安装 Sass 插件来解决这个问题：
- 打开命令面板（快捷键
Ctrl+Shift+P） - 输入
Install Package Control确保已安装 - 再次打开命令面板，输入
Package Control: Install Package - 搜索并安装
Sass插件
安装完成后，.scss 和 .sass 文件会自动使用该插件的语法定义，颜色、缩进、注释等都会更清晰，提高可读性。
配置 Build System 实现本地编译
如果你希望在 Sublime 中直接编译 SCSS 或 SASS 文件为 CSS，就需要配置一个合适的 Build System。
立即学习“前端免费学习笔记（深入）”；
首先确保你已经在系统中安装了 Sass 编译器（推荐使用 sass 或 sass 的 Dart 版本）：
npm install -g sass
接着，在 Sublime 中创建一个新的 Build System：
- 菜单栏选择
Tools > Build System > New Build System... - 替换内容为以下 JSON（以 SCSS 为例）：
{
"cmd": ["sass", "$file", "${file_path}/${file_base_name}.css"],
"selector": "source.scss",
"name": "SCSS"
}保存文件时命名为 SCSS.sublime-build。之后切换到这个 Build System，按下 Ctrl+B 即可将当前 .scss 文件编译成同目录下的 .css 文件。
小技巧：如果你想在编译时自动压缩输出 CSS，可以在 cmd 参数里加上 --style compressed。
使用项目结构优化模块化开发
SCSS 的一大优势是模块化开发，常用方式是用 @use 或 @import 引入 partial 文件（如 _variables.scss）。为了更好地组织代码，建议按如下结构组织你的 SCSS 项目：
scss/
├── main.scss
├── _variables.scss
├── _mixins.scss
├── base/
│ ├── _reset.scss
│ └── _typography.scss
└── components/
├── _button.scss
└── _header.scss然后在 main.scss 中统一引入：
@use 'variables'; @use 'mixins'; @use 'base/reset'; @use 'base/typography'; @use 'components/button'; @use 'components/header';
这样不仅结构清晰，也方便后期维护与协作。
其他实用小技巧
-
自动补全与片段：安装
Emmet插件后，即使在 SCSS 文件中也能享受快速 CSS 属性补全。 -
错误提示增强：配合
SublimeLinter和SublimeLinter-sass-lint插件，可在编辑时实时检查 SCSS 错误。 - 多光标编辑：在写多个类似组件样式时，使用多光标操作可以大幅提升效率。
基本上就这些，配置好之后，Sublime 可以成为一个轻量但高效的 SCSS/SASS 开发工具。虽然不如 VSCode 功能全面，但在熟悉环境的前提下，响应更快，资源占用更低。
