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

Question

好的，这是我想要的：

1. 我编写.scss文件，而不是.sass文件
2. 保存文件后，我会在同一文件夹中得到对应的.css文件

现在Sublime Text2上有很多SASS插件，但似乎没有提供自动编译以外的任何功能。

有什么建议可以让Sublime Text2实现自动编译吗？

- Rajat

---

在Sublime Text 2中使用Build系统构建Sass，请参考以下链接：答案。 - Leonardo Lopez

Answer 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()

当然，如果将其作为官方的Package Control插件并添加用户可配置的设置（如文件保存位置、开/关等）会更好，但这满足您的要求且不会阻塞编辑器。

- Matt York

---

Sublime Text2 如何调用这个文件？ - Rajat

为了明确起见：它有效。我已经测试过了。Sublime Text 2解析其Packages目录下的所有Python文件。在这种情况下，Sublime Text解析SCSS.py并且其中定义的类继承自sublime的EventListener类。因为它覆盖了on_post_save方法，所以每次保存后Sublime都会调用该方法。这是EventListener插件类的官方文档：http://www.sublimetext.com/docs/2/api_reference.html#sublime_plugin.EventListener - Matt York

我试过了，对我没用。我的包文件夹里有以下内容：1）SCSS文件夹 2）你的SCSS.py文件 3）一个SCSS.pyc文件。 - Rajat

你是否安装了Package Control插件，并且将语法设置为SCSS（按shift+ctrl+p并输入“Set Syntax: SCSS”）？如果是，并且仍然无法工作，请按ctr+~打开ST控制台，然后尝试再次保存文件。控制台中应该有输出来解释任何错误。我可以帮助你处理输出。 - Matt York

使用UTF-8编码将文件/Users/rajat/Workspace/css/test.scss写入 Thread-3中的异常： Traceback (most recent call last): File "/System/Library/Frameworks/Python.framework/Versions/2.6/lib/python2.6/threading.py", line 532, in __bootstrap_inner self.run() File "/System/Library/Frameworks/Python.framework/Versions/2.6/lib/python2.6/threading.py", line 484, in run self.__target(*self.__args, **self.__kwargs) TypeError: 找不到必需参数'filename'(pos 2) - Rajat

Answer 2

你应该考虑使用构建系统而不是专门的插件，这很容易做到。

类似这样的东西： http://docs.sublimetext.info/en/latest/file_processing/build_systems.html

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

按下ctrl + b键来构建当前文件。如果您有多个scss的构建版本，可以从构建菜单中选择一个（工具->构建系统）。

- dikamilo

---

我记得似乎也可以在保存时触发此操作。 - airtonix

这是什么路径？它代表什么意思？ - vsync

Answer 3

您可以使用SublimeOnSaveBuild插件。 在插件过滤器设置中，只需保留.scss文件！ 它非常好用！

- Vasiliy Nikolaev

---

这正是我所需要的。 - fredley

Answer 4

Sass Builder是Sublime Text中包管理器提供的新插件。 这个插件不需要任何配置。只需编写您的SCSS并按下cmd + b即可编译。 您的CSS文件将在与SCSS相同的文件夹中生成。

- Nikhil Madhamshettiwar

Answer 5

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

Github上的SassBuilder

- Nathan L.