在 Sublime Text 2 中自动编译 SCSS 文件答案

【问题标题】：Auto compile SCSS files in Sublime Text 2在 Sublime Text 2 中自动编译 SCSS 文件
【发布时间】：2012-08-10 11:51:12
【问题描述】：

好的，这就是我想要的：

我写的是 .scss 文件，而不是 .sass 文件
保存文件时，我会在同一文件夹中获得相应的 .css 文件

现在 Sublime Text2 上有很多 SASS 插件，但似乎没有一个为我提供语法高亮之外的任何东西。

关于如何在 Sublime Text2 上进行自动编译的任何建议。

【问题讨论】：

这里How to Answer[1]，使用构建系统[1]在崇高文本2中构建sass：stackoverflow.com/questions/12448546/…

标签： sass sublimetext2

【解决方案1】：

我没有找到任何现有的插件可以做到这一点，所以这里是：

假设您已从 Package Control 安装 SCSS 插件，您可以将其保存为 Packages/User/SCSS.py。

import sublime_plugin
import subprocess
import os
from threading import Thread

def compile(input_file):
    output_file = os.path.splitext(input_file)[0] + ".css"
    cmd = "sass '{0}':'{1}'".format(input_file, output_file)
    subprocess.call(cmd, shell=True)

class SCSS(sublime_plugin.EventListener):

    def on_post_save(self, view):
        scope = (view.syntax_name(view.sel()[0].b)).split().pop()
        if scope == "source.scss":
            input_file = view.file_name()
            t = Thread(target=compile, args=(input_file,))
            t.start()

当然，这作为一个官方的包控制插件会更好，用户可配置设置（保存文件的位置、开/关等），但这符合您的要求并且不会阻塞编辑器。

【讨论】：

Sublime Text2 将如何调用这个文件？
为了明确起见：它有效。我测试了它。 Sublime Text 2 解析其 Packages 目录下的所有 python 文件。在这种情况下，Sublime Text 解析 SCSS.py 并且其中定义的类继承自 sublime 的 EventListener 类。因为它覆盖了 on_post_save 方法，所以 Sublime 会在每次保存后调用该方法。以下是 EventListener 插件类的官方文档：sublimetext.com/docs/2/…
我试过了。对我不起作用。我的包文件夹有以下内容：1）SCSS 文件夹 2）你的 SCSS.py 文件 3）一个 SCSS.pyc 文件。
您是否安装了 Package Control 插件，您的语法当前是否设置为 SCSS（shift+ctrl+p 并键入“Set Syntax: SCSS”）？如果是，但仍然无法正常工作，请按 ctr+~ 调出 ST 控制台，然后再次尝试保存文件。控制台中应该有解释任何错误的输出。我可以帮你输出。
编写文件 /Users/rajat/Workspace/css/test.scss 使用 UTF-8 编码在线程 Thread-3 中出现异常：回溯（最后一次调用）：文件“/System/Library/Frameworks /Python.framework/Versions/2.6/lib/python2.6/threading.py”，第 532 行，在 __bootstrap_inner self.run() 文件中“/System/Library/Frameworks/Python.framework/Versions/2.6/lib/python2 .6/threading.py"，第 484 行，运行中 self.__target(*self.__args, **self.__kwargs) TypeError: required argument 'filename' (pos 2) not found

【解决方案2】：

您应该考虑使用构建系统而不是它的专用插件。做起来很简单。

http://docs.sublimetext.info/en/latest/file_processing/build_systems.html

类似这样的：

{
  "cmd": ["sass","$file"],
  "selector": "source.scss",
  "path": "/usr/local/bin"
}

然后点击ctrl + b t 构建当前文件。如果您有多个 scss 构建，您可以从构建菜单中选择一个 (Tools -> Build Systems)。

【讨论】：

我似乎记得也可以在“保存时”触发此操作
这条路径是什么？它代表什么？

【解决方案3】：

您可以使用SublimeOnSaveBuild 插件。在插件过滤器设置中只留下 .scss 文件！效果很好！

【讨论】：

这正是我所需要的。

【解决方案4】：

我正在为 Sublime Test 寻找一个 sass/scss 编译器插件，但我的源文件夹与我的 css 文件夹是分开的。因此，离开这里留下的 cmets，我编写了 SassBuilder，它运行存储在源文件夹中的配置文件。它也已提交到 Sublime Package Control 存储库。一旦他们拉取请求，您就可以从那里安装它。

SassBuilder on github

【讨论】：

【解决方案5】：

Sass Builder 是 sublime text 包管理器中的新插件。这不需要任何配置。只需编写您的 scss 并按 cmd + b 进行编译。您的 css 文件将生成在与 scss 相同的文件夹中。

【讨论】：