Using Haml & Sass with Eclipse

https://stackoverflow.com/questions/1474096

16-09-2019
|

Question

Are there any plugins for eclipse that add syntax highlighting and other niceties for editing Haml and Sass? Google searches only seem to point to a dead project on lucky-dip.net.

Note: it's Sass I'm most interested in. A solution for using just Sass (or something similar to it like less) in Eclipse would suit my needs.

Also, I'm developing for Google App Engine (Java), using the App Engine plugin for Eclipse. So switching to another IDE isn't an option.

Update: So I've got syntax highlighting now using Pascal's answer and I've installed Ruby and Compass to compile sass into css.

However I'm aware that the syntax of sass will be changing with 2.4 so I'd still like to get the Haml and Sass Editors that come with Aptana to work. When I tried to use them they threw an exception and wouldn't display the files. I'd be interested to know if that's because I misconfigured Aptana or is an actual bug in the editors.

I'd also be very interested in any way of compiling Sass that integrated with Ecplise so that I didn't have to run something separate from it. (or a way of putting Sass/Compass in the Ecplise build process.)

Solution

Well, what about Aptana? According to the Haml/Saas Syntax Highlighting in Aptana/Eclipse blog post:

Recently, I have been using Haml in some my Rails projects. It simply makes your views clean and readable. One issue I had was syntax highlighting in my favorite IDE, Aptana Studio. The Haml syntax highlighting support has been stopped a while ago and more issues have raised after Aptana recent updates.

After some research, I found a solution posted by Max Kostovetski, a member of Haml Google group. Now, to the steps:

Download the following files to your hard drive:>

http://haml.googlegroups.com/web/haml_lexer.lxr

http://haml.googlegroups.com/web/haml.col

http://haml.googlegroups.com/web/sass_lexer.lxr

http://haml.googlegroups.com/web/sass.col

From ~~Aptana~~Eclipse "Window" menu, select "Preferences..."

In the the preferences window, select "Editors" > "Generic Text"

Press "Add..." to add new file extensions: *.haml and *.sass

For each of the new extensions, click it and press "Browse..." to select the proper lexer file (*.lxr)

For colorization, press "Import..." to import the *.col files

Press "OK"

Enjoy you Haml views

PS: Refer to the original blog post as it provides up-to-date links.

Note: this can be used with the Aptana RadRails Eclipse plugin as well as Aptana Studio

UPDATE: At the time of writing, RadRails and Studio seems to support Haml and Sass so it might now be unnecessary to follow the steps above.

To compile SaaS in an "integrated" way inside Eclipse, you could maybe just use an External Tool (Run > External Tools). Another more elaborated option would be to add a "Program Builder" to your project's Builders like in this blog post. Of course, the described solution would require to be adapted to Saas but the principles behind it seems to apply. Caution: I didn't implement it myself, it's just an idea and I'm not even sure it makes sense.

OTHER TIPS

Notice that latest EclipseColorer actually supports both HAML&SASS. It may be a good alternative choice if you don't need a full featured Aptana IDE, but just looking for an editor.

EclipseColorer also gives you better syntax mixin support: other languages inside of HAML are highlighted with respect of their syntax (mixins for ruby, javascript, css, even sass).

While it doesn't appear that there are any HAML or SASS syntax highlighters yet, you may want to consider doing something along the lines of bringing VIM (which does have support for HAML syntax highlighting) into Eclipse via a few available plugins. Eclim might be a possibility (although, I have not used it - just trying to offer other alternatives).

Another options is to take an already existing Eclipse syntax highlighting plug-in and add syntax highlighting for Sass and/or HAML. Something like the Eclipse Colorer may be worth looking into.

I know this is an old question, but for anyone new to SASS aond Compass like me, I just installed Aptana Studio 3 and it now has support for .scss, .sass, and .haml. Enjoy.

Aptana causes too many problems for me, so after lots of searching (which turned up this thread), I found LiClipseText (https://marketplace.eclipse.org/content/liclipsetext)

It is a plugin that provides, amongst other things, syntax highlighting for SASS/SCSS files. It seems to work, and has "Syntax Highlighting (LiClipse, TextMate or SublimeText based)" so is probably quite configurable (I have not played around with it much, but the basic syntax highlighting feature is working for me, which is more than the Eclipse WST CSS editor could do for SCSS files).

It is the open-sourced editor component of the commercial LiClipse plugin (https://marketplace.eclipse.org/content/liclipse) which I have not used.

I found Colorer plugin in Igor's answer interesting, yet I use .scss file extention and it only works for .sass files. Here's how to make it support .scss file extension:

First install the plugin as normal. Select Install New software in Help menu in Eclipse and add the following repository: http://colorer.sf.net/eclipsecolorer. Now select this repository and you should see the Eclipse Colorer install option. There is no drag-install option AFAIK.

After install, goto Colorer plugin folder inside Eclipse's plugin directory. In my case that's eclipse/plugins/net.sf.colorer_0.9.9/. There you'll have to modify 3 files:

colorer/hrc/common.jar
colorer/hrc/proto.hrc
/plugin.xml

Before doing any of the below instruction, please backup all files in the folder in order to restore them if anything goes wrong.

Modifying common.jar

Extract common.jar to an empty folder. This is done as any normal tar.gz file. Once extracted you'll have to modify 2 files in it:

duplicate lines 53 and 53 in inet/haml.hrc and change it to scss. The result should be like below:

<block start='/^((\s\s)*):(sass)/' end='/^\M (\s*$|\y1\s)?! /ix' region='def:Insertion' region01='def:Outlined'
    region00='def:PairStart' region10='def:PairEnd' content-priority='low' scheme='sass:sass'/>
<block start='/^((\s\s)*):(scss)/' end='/^\M (\s*$|\y1\s)?! /ix' region='def:Insertion' region01='def:Outlined'
    region00='def:PairStart' region10='def:PairEnd' content-priority='low' scheme='scss:scss'/>

now copy inet/sass.hrc to inet/scss.hrc and change the relevant lines. The resulting scss.hrc should be like below:

<?xml version="1.0" encoding='Windows-1251'?>
<!DOCTYPE hrc PUBLIC "-//Cail Lomecb//DTD Colorer HRC take5//EN"
  "http://colorer.sf.net/2003/hrc.dtd">
<hrc version="take5" xmlns="http://colorer.sf.net/2003/hrc"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://colorer.sf.net/2003/hrc http://colorer.sf.net/2003/hrc.xsd">

  <type name="scss">

    <annotation>
     <documentation>
      SCSS Sassy CSS 
     </documentation>
     <contributors><![CDATA[
     Igor Russkih irusskih at gmail dot com
     ]]></contributors>
    </annotation>

    <region name="ClassSelector" parent="def:TypeKeyword"/>
    <region name="IDSelector" parent="def:Keyword"/>
    <region name="IncludeMixin" parent="def:Label"/>

    <scheme name='PropertyNames'>
      <regexp match="/(\$)([\w\d\-]+)/" region='def:Var'/>
      <inherit scheme='css:PropertyNames'/>
    </scheme>

    <scheme name="PropertyWrapper">
       <block start="/~/" end="/(:|\s|$)/" scheme="PropertyNames" region10="def:Symbol"/>

       <regexp match="/(\$)([\w\d\-]+)/" region='def:Var'/>

       <inherit scheme="css:Property"/>
    </scheme>

    <scheme name="scss">
       <!-- property value after colon -->
       <block start="/\M([\$\w\d\-]+)\s*(:)/" end="/\M([\x22\x27]|$)/"
              scheme="PropertyWrapper" region02="def:Symbol"
       />
       <block start="/(:)\s*\M([\w\d\-]+)?/" end="/\M([\x22\x27]|$)/"
              scheme="PropertyWrapper" region02="def:Symbol"
       />
       <regexp match="/^ \s* \M[\.\#\=\@\!] (?{def:Outlined}[\w\d\-]+ ) /x" />

       <regexp match="/ \. (?{ClassSelector}[\w\d\-]+ ) /x" />
       <regexp match="/ \# (?{IDSelector}[\w\d\-]+ ) /x" />
       <regexp match="/ [\=\+] (?{IncludeMixin}[\w\d\-]+ ) /x" />

       <regexp match="/[\(\)&apos;&quot;]/" region='def:Symbol'/>

       <regexp match="/\/\/.*$/" region='def:Comment'/>

       <regexp match="/\@(import|extend|mixin)/" region='def:Keyword'/>

    </scheme>

  </type>
</hrc>
<!-- ***** BEGIN LICENSE BLOCK *****
   - Version: MPL 1.1/GPL 2.0/LGPL 2.1
   -
   - The contents of this file are subject to the Mozilla Public License Version
   - 1.1 (the "License"); you may not use this file except in compliance with
   - the License. You may obtain a copy of the License at
   - http://www.mozilla.org/MPL/
   -
   - Software distributed under the License is distributed on an "AS IS" basis,
   - WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
   - for the specific language governing rights and limitations under the
   - License.
   -
   - The Original Code is the Colorer Library.
   -
   - The Initial Developer of the Original Code is
   - Igor Russkih <irusskih at gmail dot com>
   - Portions created by the Initial Developer are Copyright (C) 2010
   - the Initial Developer. All Rights Reserved.
   -
   - Contributor(s): 
   -
   - Alternatively, the contents of this file may be used under the terms of
   - either the GNU General Public License Version 2 or later (the "GPL"), or
   - the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
   - in which case the provisions of the GPL or the LGPL are applicable instead
   - of those above. If you wish to allow use of your version of this file only
   - under the terms of either the GPL or the LGPL, and not to allow others to
   - use your version of this file under the terms of the MPL, indicate your
   - decision by deleting the provisions above and replace them with the notice
   - and other provisions required by the LGPL or the GPL. If you do not delete
   - the provisions above, a recipient may use your version of this file under
   - the terms of any one of the MPL, the GPL or the LGPL.
   -
   - ***** END LICENSE BLOCK ***** -->

after this, run the following command in the folder where you extract common.jar to recreate the jar file:

jar cf common.jar *

then substitute the original jar file by this one.

Other files

Now, include scss extension in /plugin.xml line 37:

extensions="xml,xsd,xsl,dtd,hrc,hrd,html,htm,xhtml,rhtml,erb,yml,haml,sass,scss,css,asp,aspx,jsp,fo,svg,dbk,docbook,jhtml,jspf,php,php3,php4,phtml,sgm,sgml,shtm,shtml"

And finally, duplicate lines 200-203 in colorer/hrc/proto.hrc. The result should be like below:

<prototype name="sass" group="inet" description="SASS">
  <location link="jar:common.jar!inet/sass.hrc"/>
  <filename>/\.(sass)$/i</filename>
</prototype>
<prototype name="scss" group="inet" description="SCSS">
  <location link="jar:common.jar!inet/scss.hrc"/>
  <filename>/\.(scss)$/i</filename>
</prototype>

After this restart eclipse and you should have syntax highlighting for .scss files.

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow