Question

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?

Answer 1

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.