先安装Node.js和Dart Sass，再在Sublime Text中创建自定义构建系统，通过配置JSON调用sass命令实现一键编译或保存自动编译。
要在Sublime Text里跑Sass文件，其实不是Sublime自己能直接编译，它更像一个聪明的编辑器，需要我们给它配上“外挂”——一个能理解和编译Sass的工具，然后通过Sublime的“构建系统”（Build System）来调用这个工具。最快最直接的办法，就是借助Node.js环境下的Sass编译器，比如现在主流的Dart Sass（以前是Node-Sass），然后设置一个简单的构建脚本。这样，你就能在Sublime里一键编译，甚至实现文件保存时自动编译了。
说真的，第一次搞这个可能觉得有点绕，但跟着步骤来，你会发现其实挺直接的。核心思路就是：先让你的系统能编译Sass，然后告诉Sublime怎么去调用它。
安装Node.js环境： 这是基础。Sass的编译器，无论是旧的
node-sass
还是新的sass
（也就是Dart Sass的命令行工具），都依赖Node.js和npm（Node包管理器）。如果你还没装，去Node.js官网下载安装包，一路“下一步”就好。安装完后，打开命令行（终端），输入node -v
和npm -v
，确认都安装成功了。-
安装Sass编译器： 推荐使用Dart Sass的命令行工具。在命令行里执行：
npm install -g sass
这个命令会把Sass编译器安装到你的全局环境里，这样你就可以在任何地方直接用
sass
命令了。如果你之前用的是node-sass
，也可以继续用，但Dart Sass更快，也更符合Sass语言的官方推荐。 -
创建Sublime Text构建系统：
- 打开Sublime Text。
- 点击菜单栏的
Tools
->Build System
->New Build System...
。 - 会弹出一个新的文件，里面有一些JSON模板。把里面的内容替换成下面这个：
{ "cmd": ["sass", "--update", "$file", "${file_path}/${file_base_name}.css"], "selector": "source.sass, source.scss", "working_dir": "$file_path", "shell": true, "variants": [ { "name": "Watch", "cmd": ["sass", "--watch", "$file", "${file_path}/${file_base_name}.css"], "selector": "source.sass, source.scss", "working_dir": "$file_path", "shell": true } ] }-
解释一下这个配置：
"cmd": ["sass", "--update", "$file", "${file_path}/${file_base_name}.css"]：这是默认的编译命令。sass
是你的编译器，--update
只编译修改过的文件，$file
是当前打开的Sass文件路径，${file_path}/${file_base_name}.css是输出的CSS文件路径，它会和Sass文件在同一个目录下，名字相同。"selector": "source.sass, source.scss"
：这个构建系统只会在你编辑.sass
或.scss
文件时出现。"working_dir": "$file_path"
：让命令在当前Sass文件所在的目录执行，避免路径问题。"shell": true
：在shell环境中执行命令，有时能解决一些环境变量问题。"variants"
：这里我加了一个“Watch”模式。当你选择这个模式后，Sass会持续监听你当前Sass文件的变化，一旦保存就自动编译，这在开发中简直是神器。
保存这个文件，命名为
Sass.sublime-build
。你可以保存在默认的User
目录下（Sublime会提示你）。
-
运行Sass编译：
- 打开一个
.scss
或.sass
文件。 - 点击
Tools
->Build System
，选择你刚刚保存的sass
。 - 现在，你可以按
Ctrl+B
(Windows/Linux) 或Cmd+B
(macOS) 来运行默认的编译命令。
- 打开一个
