How to integrate CSS pre-processing within Eclipse?

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

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

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

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

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.

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):

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.

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

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

7. Make sure Internal editors is selected on the top, then find and select CSS Editor and then click 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:

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

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

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

6. Click OK to close out the Preferences window.

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!

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

Hope this helps.

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:

Installing via Eclipse

<p>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.</p>

<p><a href="http://download.aptana.com/studio3/plugin/install">http://download.aptana.com/studio3/plugin/install</a></p>

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

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

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