Sass的scss文件或语法着色插件是否有Eclipse编辑器?

时间：2022-09-11 19:51:59

I am looking for a plugin/editor for eclipse for syntax highlighting for .scss files.

我正在寻找一个eclipse的插件/编辑器来突出显示.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文件没有编辑器。http://colorer.sourceforge.net/eclipsecolorer/只有.scss文件

3 个解决方案

#1

281  

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的步骤(我正在为Web开发人员使用eclipse Java EE IDE):

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

  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 *.scss and then click OK.

    对于文件类型:，输入*。然后点击OK。

  5. Find the *.scss entry in the File Associations list and select it.

    找到*。在文件关联列表中选择scss条目。

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

    在选择*。scss，在底部窗格相关编辑器:，单击Add…按钮。

  7. Make sure Internal editors is selected on the top, then find and select CSS Editor and then click OK.

    确保在顶部选中内部编辑器，然后找到并选择CSS编辑器，然后单击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与eclipse本地的CSS编辑器相关联。现在我们必须配置本机CSS编辑器来支持.scss文件。要做到这一点，请遵循以下步骤:

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

  1. Go to Window > Preferences

    转到窗口>首选项

  2. Drill down to General > Content Types

    深入到一般的>内容类型

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

    在“内容类型”窗格中，展开文本，然后选择CSS

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

    选择CSS之后，在底部的文件关联:窗格中，单击Add…按钮。

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

    对于内容类型:，输入*。然后点击OK。

  6. Click OK to close out the Preferences window.

    单击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中重新打开它们和wha-la, css颜色的。scss文件!

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颜色没有出现，您可能需要执行以下操作:用> css编辑器右键单击.scss文件>。

Hope this helps.

希望这个有帮助。

#2

11  

Aptana Studio provides 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 sownload站点的以下引用:

Installing via Eclipse

通过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.

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

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

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

  1. From the Help menu, select »Install New Software …« to open the Install New Software dialog.
  2. 在“帮助”菜单中，选择“安装新软件……”以打开“安装新软件”对话框。
  3. Paste the URL for the update site into the Work With text box, and hit the Enter (or Return) key.
  4. 使用文本框将更新站点的URL粘贴到工作中，然后单击Enter(或Return)键。
  5. In the populated table below, check the box next to the name of the plug-in, and then click the Next button.
  6. 在下面的填充表中，选中插件名称旁边的复选框，然后单击next按钮。
  7. Click the Next button to go to the license page.
  8. 单击Next按钮进入许可页面。
  9. Choose the option to accept the terms of the license agreement, and click the Finish button.
  10. 选择接受许可协议条款的选项，并单击Finish按钮。
  11. You may need to restart Eclipse to continue.
  12. 您可能需要重新启动Eclipse才能继续。

#3

6  

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/eclipsecoler”输入“Work with”框以安装插件

#1

281  

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的步骤(我正在为Web开发人员使用eclipse Java EE IDE):

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

  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 *.scss and then click OK.

    对于文件类型:，输入*。然后点击OK。

  5. Find the *.scss entry in the File Associations list and select it.

    找到*。在文件关联列表中选择scss条目。

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

    在选择*。scss，在底部窗格相关编辑器:，单击Add…按钮。

  7. Make sure Internal editors is selected on the top, then find and select CSS Editor and then click OK.

    确保在顶部选中内部编辑器，然后找到并选择CSS编辑器，然后单击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与eclipse本地的CSS编辑器相关联。现在我们必须配置本机CSS编辑器来支持.scss文件。要做到这一点，请遵循以下步骤:

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

  1. Go to Window > Preferences

    转到窗口>首选项

  2. Drill down to General > Content Types

    深入到一般的>内容类型

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

    在“内容类型”窗格中，展开文本，然后选择CSS

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

    选择CSS之后，在底部的文件关联:窗格中，单击Add…按钮。

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

    对于内容类型:，输入*。然后点击OK。

  6. Click OK to close out the Preferences window.

    单击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中重新打开它们和wha-la, css颜色的。scss文件!

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颜色没有出现，您可能需要执行以下操作:用> css编辑器右键单击.scss文件>。

Hope this helps.

希望这个有帮助。

#2

11  

Aptana Studio provides 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 sownload站点的以下引用:

Installing via Eclipse

通过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.

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

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

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

  1. From the Help menu, select »Install New Software …« to open the Install New Software dialog.
  2. 在“帮助”菜单中，选择“安装新软件……”以打开“安装新软件”对话框。
  3. Paste the URL for the update site into the Work With text box, and hit the Enter (or Return) key.
  4. 使用文本框将更新站点的URL粘贴到工作中，然后单击Enter(或Return)键。
  5. In the populated table below, check the box next to the name of the plug-in, and then click the Next button.
  6. 在下面的填充表中，选中插件名称旁边的复选框，然后单击next按钮。
  7. Click the Next button to go to the license page.
  8. 单击Next按钮进入许可页面。
  9. Choose the option to accept the terms of the license agreement, and click the Finish button.
  10. 选择接受许可协议条款的选项，并单击Finish按钮。
  11. You may need to restart Eclipse to continue.
  12. 您可能需要重新启动Eclipse才能继续。

#3

6  

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/eclipsecoler”输入“Work with”框以安装插件

标签：

相关文章