Using Haml & Sass with Eclipse
Asked Answered
S

6

40

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

Sparke answered 24/9, 2009 at 20:55 Comment(1)
For the interested, I never did get anything working satisfactorily. I'm now using Emacs with scss-mode and sassc :)Sparke
T
28

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:

  1. Download the following files to your hard drive:>
  2. From AptanaEclipse "Window" menu, select "Preferences..."
  3. In the the preferences window, select "Editors" > "Generic Text"
  4. Press "Add..." to add new file extensions: *.haml and *.sass
  5. For each of the new extensions, click it and press "Browse..." to select the proper lexer file (*.lxr)
  6. For colorization, press "Import..." to import the *.col files
  7. Press "OK"
  8. 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.

Textbook answered 2/10, 2009 at 14:41 Comment(7)
I'm developing for Google App Engine (Java), using the App Engine plugin for Eclipse. Switching to Aptana isn't an option.Sparke
Also, I'm not sure why that post mentions Eclipse, the instructions make no sense in it, and the lxr/col files don't appear to work with Eclipse either.Sparke
Hmm... I was suggesting to use the Aptana Eclipse plugin, not the standalone version. Then these instructions are indeed very close to mail-archive.com/[email protected]/msg01886.html that applies to Eclipse. I admit I didn't test this myself but I don't get why it doesn't make sense in Eclipse. Please keep me updated, I'm curious.Textbook
I didn't realise Aptana was also an Eclipse Plugin. While installing the Aptana RadRails plugin there was an option to install Haml and Sass Editors. So this could be just what I needed, however I think I might have bungled the install as the Editor is throwing an exception.Sparke
Haaaaa, at least I understand what you're saying now. Regarding the exception, it's another story :)Textbook
I couldn't get the Haml & Sass Editor plugin to work, so I uninstalled it and set up the lexer as described above. Thanks for your help.Sparke
These instructions for using the .lxr and .col files to add syntax highlighting are no longer accurate as of Eclipse Helios. Something's evidently changed, perhaps the XText stuff?Pickerel
J
11

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

Jennifer answered 27/5, 2010 at 4:55 Comment(1)
Thanks Igor, your plugin looks like it would suit my needs better than Aptana. I'll have to look at it next time I'm working on that project.Sparke
A
1

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.

Anthelion answered 2/10, 2009 at 16:16 Comment(0)
L
1

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.

Loquitur answered 22/5, 2012 at 19:43 Comment(0)
C
1

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.

Cheyennecheyne answered 2/6, 2016 at 17:44 Comment(0)
S
1

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.

Substantialize answered 14/6, 2016 at 11:9 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.