如何在SublimeText中运行Sass文件？快速配置Sass编译的教程-sublime-PHP中文网

如何在SublimeText中运行Sass文件？快速配置Sass编译的教程

看不見的法師

发布： 2025-09-03 13:07:01

原创

942人浏览过

先安装Node.js和Dart Sass，再在Sublime Text中创建自定义构建系统，通过配置JSON调用sass命令实现一键编译或保存自动编译。

如何在sublimetext中运行sass文件？快速配置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语言的官方推荐。

Lessie AI
一款定位为「People Search AI Agent」的AI搜索智能体

297

查看详情
创建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) 来运行默认的编译命令。