如何在 Sublime Text 3 中自动将 Sass 编译为 CSS？答案

【问题标题】：How to compile Sass to CSS in Sublime Text 3 automatically?如何在 Sublime Text 3 中自动将 Sass 编译为 CSS？
【发布时间】：2016-07-22 02:36:38
【问题描述】：

例如，有一个用于 less LessToCss 的包。至于 Sass（或 SCSS），我不知道我应该做什么。安装了 Ruby 和 sublime 包 Sass。

【问题讨论】：

github.com/timdouglas/sublime-less2css找到了这个，不过没试过
花更少的钱。我需要 sass 的信息

标签： sass sublimetext3

【解决方案1】：

您必须更改环境变量中 PATH 字符串末尾的 PATH 变量：桌面 - 属性 - 环境变量。它适用于 win vista/7 用户。此处为 2000/XP 的详细信息Sass compiler not working in sublime text 3

【讨论】：

【解决方案2】：

一种方法是从这里下载一个 SASS 编译器：SASS Compiler 这是一个自动的 Sublime 包，它只是在这个地方构建你的文件。然而，自从他们发布了新版本以来，这个包似乎有多个设置——你可以试着弄乱一下，看看它现在能做什么。

第二种方法是在 Sublime 中编写自己的构建命令。您可以通过转到“工具>构建系统>新构建系统...”来完成此操作

{

    "cmd": ["sass", "--update", "$file:${project_path}/Project/Web/css/${file_base_name}.css", "--stop-on-error", "--style", "compressed", "--no-cache", "--sourcemap=none"],
    "selector": "source.sass, source.scss",
    "line_regex": "Line ([0-9]+):",

    "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

    "windows":
    {
        "shell": "true"
    }

}

说明：我使用如下文件夹结构：Project/Web/CSS - 如果您的 Sublime Project FILE 与 Project FOLDER 处于同一级别，那么这将自动构建您的 Sass 文件（放置在项目文件中的任何位置) 在您的 Web/CSS 文件夹中。当然，您可以根据需要更改此设置。

【讨论】：

该插件仅适用于 ST 2。

【解决方案3】：

这是 100% 的解决方案，我也在使用。实际上我在 mac 中使用，所以我不确定 windows，因为我还不会在 windows 中尝试，但我认为它也可以在 windows 中使用。

所以这里是构建；

从开始的括号中复制它并将其粘贴到构建中，然后使用任何名称保存，例如 (Build to CSS),"

{

    "cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache"],

    "osx":
    {
        "path": "/user/local/bin:$PATH"
    },

    "windows":
    {
        "shell": true
    }
}

如果有效，请发表评论。

谢谢

【讨论】：