CSS Eclipse插件自动编译Sass文件

Eclipse plugin to automatically compile Sass files

提问by Hymanocnr

I'm currently using the Aptana plugin for Eclipse, which is giving me great syntax highlighting, and allows me to manually click to compile a *.scss file into a *.css file. What I would really like to be able to do is get it to automatically compile every time I save, but I cannot figure out how to do this.

我目前正在使用 Eclipse 的 Aptana 插件，它为我提供了很好的语法突出显示，并允许我手动单击以将 *.scss 文件编译为 *.css 文件。我真正想做的是在每次保存时让它自动编译，但我不知道如何做到这一点。

I know you can use sass --watch on the command line, but I don't want to have to set this up manually every time I open eclipse, or create a new project.

我知道您可以在命令行上使用 sass --watch，但我不想每次打开 eclipse 或创建新项目时都必须手动设置它。

Has anyone found a good way of achieving this? Is there must be a way of hooking into Aptana's Sass bundle and running it's compile command everytime I save? The accepted answer to this questionsuggests using a "Program Builder" - but is this really the best solution? If so does anyone have any tips/links to tutorials?

有没有人找到实现这一目标的好方法？每次保存时是否必须有一种方法可以连接到 Aptana 的 Sass 包并运行它的编译命令？这个问题的公认答案建议使用“程序生成器”——但这真的是最好的解决方案吗？如果是这样，有人有任何提示/教程链接吗？

Update: I wrote up a blog postabout how to use an ant script as a builder, but I'm still looking for a better way.

更新：我写了一篇关于如何使用 ant 脚本作为构建器的博客文章，但我仍在寻找更好的方法。

回答by Zed

After lot of tries, I've found that the best solution in Eclipse is to define a simple Builder using the --update sass feature:

经过多次尝试，我发现 Eclipse 中最好的解决方案是使用 --update sass 功能定义一个简单的 Builder：

• From the Project menu select "Properties" and choose the "Builders" section.
• Create a new Builder and select "Program" as configuration type.
• Choose a name for your launch configuration (SASS?!).
• Insert the path of your sass installation into the Location field.
• Use ${project_loc} as working directory.
• In the Arguments text box insert the configuration parameters you want sass to use and, at the end, specify the --update parameter followed by your sass files directory source followed by ":" and the destination folder for the compiled css files. In my configuration "resources" is the source folder containing the .scss files and "web" is the destination directory containing the compiled .css files. The --update command will check for modifications in the source folder and all sub-folders. Screenshot
• In the "Build Options" tab just check all options under the "Run the builder:" section. You can also "Specify working set of relevant resources" to launch the builder only when files contained in selected folders are saved. Screenshot
• Click ok to save your launching configuration.
• Now try to modify a .scss file in your source directory and then save it, you'll see the sass CLI output in your console window.

• 从 Project 菜单中选择“Properties”并选择“Builders”部分。
• 创建一个新的构建器并选择“程序”作为配置类型。
• 为您的启动配置选择一个名称（SASS？！）。
• 将您的 sass 安装路径插入位置字段。
• 使用 ${project_loc} 作为工作目录。
• 在 Arguments 文本框中插入您希望 sass 使用的配置参数，最后指定 --update 参数，然后是您的 sass 文件目录源，然后是“:”，以及已编译 css 文件的目标文件夹。在我的配置中，“resources”是包含 .scss 文件的源文件夹，“web”是包含已编译 .css 文件的目标目录。--update 命令将检查源文件夹和所有子文件夹中的修改。截屏
• 在“构建选项”选项卡中，只需选中“运行构建器：”部分下的所有选项。您还可以“指定相关资源的工作集”以仅在保存所选文件夹中包含的文件时启动构建器。截屏
• 单击确定以保存您的启动配置。
• 现在尝试修改源目录中的 .scss 文件，然后保存它，您将在控制台窗口中看到 sass CLI 输出。

The sass CLI will automatically check for modified resources inside the source folder (resources in my configuration) and compile them into the destination folder (web in my configuration). Also, all .sass files that @import the modified resources will be compiled.

sass CLI 将自动检查源文件夹中的修改资源（我配置中的资源）并将它们编译到目标文件夹（我配置中的 web）中。此外，所有@import 修改资源的 .sass 文件都将被编译。

回答by Tomer W

there is a watchswitch for the sass comiler.
which rebuild the output (css) file everytime the source (scss,sass) change.

watchsass 编译器有一个开关。
每次源（scss，sass）更改时都会重建输出（css）文件。

Quoting from : http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass

Using Sass

Sass can be used in three ways: as a command-line tool, as a standalone Ruby module, and as a plugin for any Rack-enabled framework, including Ruby on Rails and Merb. The first step for all of these is to install the Sass gem:

gem install sass If you're using Windows, you may need to install Ruby first.

To run Sass from the command line, just use

sass input.scss output.css You can also tell Sass to watch the file and update the CSS every time the Sass file changes:

sass --watch input.scss:output.css If you have a directory with many Sass files,
you can also tell Sass to watch the entire directory:

sass --watch app/sass:public/stylesheets Use sass --help for full documentation.

Using Sass in Ruby code is very simple. After installing the Sass gem, you can use it by running require "sass" and using Sass::Engine like so:

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss) engine.render #=> "#main { background-color: #0000ff; }\n"

引自：http: //sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass

使用 Sass

Sass 可以通过三种方式使用：作为命令行工具、作为独立的 Ruby 模块以及作为任何支持 Rack 的框架的插件，包括 Ruby on Rails 和 Merb。所有这些的第一步是安装 Sass gem：

gem install sass 如果您使用的是 Windows，您可能需要先安装 Ruby。

要从命令行运行 Sass，只需使用

sass input.scss output.css 你也可以告诉 Sass 监视文件并在每次 Sass 文件更改时更新 CSS：

sass --watch input.scss:output.css 如果你有一个包含很多 Sass 文件的目录，
你也可以告诉 Sass 监视整个目录：

sass --watch app/sass:public/stylesheets 使用 sass --help 获取完整文档。

在 Ruby 代码中使用 Sass 非常简单。安装 Sass gem 后，您可以通过运行 require "sass" 并使用 Sass::Engine 来使用它，如下所示：

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss) engine.render #=> "#main { background-color: #0000ff; }\n"

回答by tarekahf

There is much easier solution. Just follow the instructions to install SASS from:

有更简单的解决方案。只需按照以下说明安装 SASS：

http://sass-lang.com/install

http://sass-lang.com/install

and you will notice that first you will have to install Ruby. After that, just go to the folder where your SCSS/CSS files are located, start CMD and run this DOS command:

你会注意到，首先你必须安装 Ruby。之后，只需转到您的 SCSS/CSS 文件所在的文件夹，启动 CMD 并运行此 DOS 命令：

>cd <path-to-your-css-files>
>sass --watch .

Then all you need to do is to link your SCSS files to be recognized by Eclipse as native CSS files. Follow this solution:

然后您需要做的就是链接您的 SCSS 文件，以便 Eclipse 将其识别为原生 CSS 文件。按照这个解决方案：

https://stackoverflow.com/a/12322531/4180447

https://stackoverflow.com/a/12322531/4180447

Hope this helps.

希望这可以帮助。

Note: I might have missed one or two steps. This is as per what I remembered after I completed the installation. If you face any problem, just post a comment, and I will try to help you.

注意：我可能错过了一两个步骤。这是我安装完成后的记忆。如果您遇到任何问题，只需发表评论，我会尽力帮助您。

Tarek

塔雷克