Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 202
Eric H Avatar asked Sep 30 '11 18:09

Eric H


People also ask

Can we use CSS in eclipse?

Eclipse Web Developer ToolsIncludes the HTML, CSS, and JSON Editors, and JavaScript Development Tools from the Eclipse Web Tools Platform project, aimed at supporting client-side web development and node. js applications.

What is CSS eclipse?

Eclipse and declarative stylingCSS selectors used in Eclipse are identifiers, which relate to widgets or other elements, for example predefined pseudo classes. Non-standard properties are prefixed with either swt- or eclipse- . The following example shows a CSS file which defines a styling for an Eclipse application.


2 Answers

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.

like image 172
Scot Avatar answered Sep 23 '22 14:09

Scot


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.
like image 40
Yun Avatar answered Sep 23 '22 14:09

Yun