如何在 Eclipse 中集成 CSS 预处理？

How to integrate CSS pre-processing within Eclipse?

提问by Eric H

I would like to edit SCSS files in Eclipse, preferably with syntax highlighting for .scssfiles.

我想在 Eclipse 中编辑 SCSS 文件，最好使用.scss文件的语法突出显示。

I found these resources valuable:

我发现这些资源很有价值：

• http://sass-lang.com/editors.html- has no editor for .scss files only .sass
• http://colorer.sourceforge.net/eclipsecolorer- has only .scss files

• http://sass-lang.com/editors.html- 没有 .scss 文件的编辑器，只有 .sass
• http://colorer.sourceforge.net/eclipsecolorer- 只有 .scss 文件

How can do I integrate SCSS development within the Eclipse editor?

如何在 Eclipse 编辑器中集成 SCSS 开发？

Or, more generally, how do I integrate a CSS pre-processor into Eclipse?

或者，更一般地说，我如何将 CSS 预处理器集成到 Eclipse 中？

回答by Scot

I just figured out how to do this in Eclipse. I admit that this solution does not have 100% SASS support, the colors get a little funky when using nested css, but it's waaaaay better than looking at plain text and you don't need to install a separate editor.

我刚刚想出了如何在 Eclipse 中做到这一点。我承认这个解决方案没有 100% 的 SASS 支持，使用嵌套 css 时颜色会变得有点时髦，但它比查看纯文本要好，而且您不需要安装单独的编辑器。

You need to associate the .scss file type with the native Eclipse CSS Editor in Eclipse[Part 1]. After you do that, you need to add the .scss file type to the native CSS Editor as well so the CSS Editor will be able to open it [Part 2]. Here are the steps for eclipse (I'm running Eclipse Java EE IDE for Web Developers, Indigo):

您需要将 .scss 文件类型与 Eclipse [第 1 部分] 中的本机 Eclipse CSS 编辑器相关联。完成此操作后，您还需要将 .scss 文件类型添加到本机 CSS 编辑器，以便 CSS 编辑器能够打开它 [第 2 部分]。以下是 Eclipse 的步骤（我正在运行 Eclipse Java EE IDE for Web Developers, Indigo）：

Part 1 - Associate the .scss file type with the native Eclipse CSS Editor

第 1 部分 - 将 .scss 文件类型与本机 Eclipse CSS 编辑器相关联

1. Go to Window > Preferences

2. Drill down to General > Editors > File Associations

3. In File Associations pane, click the 'Add..." button on the top right.

4. For File Type:, enter *.scssand then click OK.

5. Find the *.scssentry in the File Associationslist and select it.

6. After selecting *.scss, on the bottom pane Associated editors:, click the Add...button.

7. Make sure Internal editorsis selected on the top, then find and select CSS Editorand then click OK.

1. 去 Window > Preferences

2. 深入到 General > Editors > File Associations

3. 在文件关联窗格中，单击右上角的“添加...”按钮。

4. 对于File Type:，输入*.scss然后单击OK。

5. *.scss在File Associations列表中找到条目并选择它。

6. 选择 后*.scss，在底部窗格中Associated editors:，单击Add...按钮。

7. 确保Internal editors在顶部选择了 ，然后找到并选择CSS Editor，然后单击OK。

This associated the file type .scss with eclipses native CSS Editor. Now we have to configure the native CSS Editor to support .scss files. To do this, follow this steps:

这将文件类型 .scss 与 eclipses 本机 CSS 编辑器相关联。现在我们必须配置原生 CSS 编辑器以支持 .scss 文件。为此，请按照以下步骤操作：

Part 2 - Add the .scss file type to the native CSS Editor

第 2 部分 - 将 .scss 文件类型添加到本机 CSS 编辑器

1. Go to Window > Preferences

2. Drill down to General > Content Types

3. In the Content Types pane, expand Text, then select CSS

4. After CSSis selected, on the bottom File associations:pane, click the Add...button.

5. For Content type:, enter *.scssand then click OK.

6. Click OKto close out the Preferences window.

1. 去 Window > Preferences

2. 深入到 General > Content Types

3. 在内容类型窗格中，展开Text，然后选择CSS

4. 之后CSS被选中，在底部File associations:窗格中，单击Add...按钮。

5. 对于Content type:，输入*.scss然后单击OK。

6. 单击OK以关闭“首选项”窗口。

All done. All you need to do now is close any .scss files that you have open then re-open them and wha-la, css colors in Eclipse for .scss files!

全部完成。您现在需要做的就是关闭您打开的所有 .scss 文件，然后重新打开它们，然后在 Eclipse 中为 .scss 文件设置 css 颜色！

Note: If the css colours do not appear you may have to do the following: Right click the .scss file > Open With > CSS Editor.

注意：如果没有出现在CSS颜色可能必须做到以下几点：Right click the .scss file > Open With > CSS Editor。

Hope this helps.

希望这可以帮助。

回答by Yun

Aptana Studioprovides syntax coloring support for SASS/SCSS and it's possible to install Aptana as Plugin into Eclipse. See the following quote from the Aptana sownload site:

Aptana Studio为 SASS/SCSS 提供语法着色支持，并且可以将 Aptana 作为插件安装到 Eclipse 中。请参阅 Aptana 下载站点中的以下引用：

Installing via Eclipse

Please copy the following Update Site URL to your clipboard and then follow the steps listed below to add this URL to your Available Software Sites list. Attempting to access this URL using your web browser will return an Access Denied error.

http://download.aptana.com/studio3/plugin/install

1. From the Help menu, select ?Install New Software …? to open the Install New Software dialog.
2. Paste the URL for the update site into the Work With text box, and hit the Enter (or Return) key.
3. In the populated table below, check the box next to the name of the plug-in, and then click the Next button.
4. Click the Next button to go to the license page.
5. Choose the option to accept the terms of the license agreement, and click the Finish button.
6. You may need to restart Eclipse to continue.

通过 Eclipse 安装

请将以下更新站点 URL 复制到剪贴板，然后按照下面列出的步骤将此 URL 添加到可用软件站点列表中。尝试使用 Web 浏览器访问此 URL 将返回拒绝访问错误。

http://download.aptana.com/studio3/plugin/install

1. 从帮助菜单中，选择？安装新软件...？打开安装新软件对话框。
2. 将更新站点的 URL 粘贴到“处理”文本框中，然后按 Enter（或 Return）键。
3. 在下面填充的表格中，选中插件名称旁边的框，然后单击下一步按钮。
4. 单击下一步按钮转到许可证页面。
5. 选择接受许可协议条款的选项，然后单击完成按钮。
6. 您可能需要重新启动 Eclipse 才能继续。

回答by vyasamit2007

You can use the latest Eclipse Plug-in called "Colorer" which now supports SASS files. Here it is : http://colorer.sourceforge.net/eclipsecolorer/index.html

您可以使用名为“Colorer”的最新 Eclipse 插件，它现在支持 SASS 文件。这是：http: //colorer.sourceforge.net/eclipsecolorer/index.html

Open "Install New software" From "Help" menu in Eclipse and Enter "http://colorer.sf.net/eclipsecolorer" into the "Work with" box to install the plug-in

在 Eclipse 的“帮助”菜单中打开“安装新软件”，在“使用”框中输入“ http://colorer.sf.net/eclipsecolorer”以安装插件