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 功能全面，但在熟悉环境的前提下，响应更快，资源占用更低。
