How to integrate CSS pre-processing within Eclipse? [closed]

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?

Genous

duplicate of #1474596 – Polloch

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.

Francescafrancesco

+1 for not installing any extra tools and using eclipse as is... Another option could be "colorer.sourceforge.net/eclipsecolorer" – Allhallowmas

@Allhallowmas eclipsecolorer supports only sass files (tryd today in juno) – Hermon

@mons switched to PHPStorm, much faster, much better support and event compiling on save in editor. Give it a try – Allhallowmas

@Allhallowmas thanks for the tip but im contrained to eclipse :-/ – Hermon

eclipsecolorer does not support scss. It DOES support sass. There are differences. – Tellurian

@spankmaster79: compass will watch your scss and sass files and compile them on save to css, use Scout if you want a GUI for that. I have it installed on MacOS X and, off the top of my head, am not aware if that works on other platforms, but chances are it does. – Biographer

Great!! This is useful for ftl files, you can associate with HTML editor using the same method as described above. Thank you!! – Rutherford

Oh well, until there is a real deal this is as good as it will get. Thanks – Udell

+1 for answer. really helpful – Finnougrian

I'm using Eclipse Luna and I had to restart the whole program to get syntax highlighting working. – Eschar

Adding a note for: Right click the .scss file > Open With > CSS Editor use instead > Other ... click CSS Editor and then tick "use this editor for all 'style.scss' files and tick 'Use it for all '*.scss' files. – Lemuelah

Does anyone know if it's possible to get Eclipse to treat SASS-specific syntax nicely when auto-formatting? Using auto-format works great with the more CSS-like parts, but mangles a lot of nesting and even just variables. – Bayonne

@Scot, nice work with the detail – Vying

@Francescafrancesco - I love you man, in a very many brotherly way. – Halter

Answer 2

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

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.

Digestive

Be aware that Aptana has its own theme coloring. If you're used to a certain Eclipse color theme, prepare to have to abandon it completely if you install the Aptana Plugin. – Kilowatthour

Bad idea! Totally broke my Eclipse editors. – Stench

Answer 3

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

Echino

Does it support automatic (i.e. ctrl+space) completion? – Fuddle

Showing too much error ! almost on every line – Becquerel

there is new software available in Eclipse called "Liclipse" that work with most of langauges – Recreate