LESS syntax highlighting in Espresso

Posted on December 13, 2011

Post updated on 10 March 2012 to prevent syntax highlighting being overwritten when Espresso is updated

The lack of automatic syntax highlighting for LESS in Espresso was the only problem I had with it, but it turns out it’s incredibly easy to implement, just take these easy steps.

Make sure Espresso is shut down.
Open up a Finder window, press Shift-Cmd-G and type in /Applications/Espresso.app/Contents/SharedSupport/Sugars/.
Right click “CSS.sugar” and press “Copy CSS.sugar”.
Press Shift-Cmd-G again and type in /Library/Application Support/Espresso/Sugars.
Click in the Finder window and press Cmd-V to paste “CSS.sugar”.
Right click “CSS.sugar” and press “Show Package Contents”.
Right click “Languages.xml” and open in Espresso.
Duplicate the line <extension>css</extension> and change the duplicated “css” to “less”.
Close your text editor and open up a LESS file in Espresso (if it’s not working, make sure you do a proper restart).

In case you’re confused, here’s what my Languages.xml file looks like:

Andru

Instructions are great, but just a little note that this change will be overwritten when the application is updated.
If you copy the CSS.sugar file to /Library/Application Support/Espresso/Sugars/CSS.sugar and make the relevant modifications, your less support will stick around between updates
See this blog post: http://n3tr.com/development/how-to-make-espresso-support-less-css-file

http://www.lukejones.me/ Luke Jones

Hi Andru, Thanks a lot for the advice. I’ve updated the article accordingly.

http://iamkeir.com iamkeir

Nice one, Luke. Found this recommended LESS.sugar on GitHub… just no idea how you install a sugar! https://github.com/cellfusion/LESS.sugar
http://iamkeir.com iamkeir

Scratch that, figured it out… Luke, I think you may have solved something extremely awesome for me… I will report back shortly…!

http://www.lukejones.me/ Luke Jones

I’m intrigued Keir, what is it you’re cooking up?

http://iamkeir.com iamkeir

I was hoping that the @grouping would still work with a LESS sugar.. but unfortunately not. Hoping that I can tweak it to work though. The @grouping in CSSEdit was a killer feature.

http://www.lukejones.me/ Luke Jones

I’ve never used that! Is that where you write comments like /* @group */ that?

http://iamkeir.com iamkeir

Yep – massively underused tool. Basically creates a expandable contents/index of your entire stylesheet. Really useful for well-structured CSS. A feature I sorely miss.

http://twitter.com/martinbean Martin Bean

I was going to mention the Github repository iamkeir mentioned (https://github.com/cellfusion/LESS.sugar.git) that I’ve been using to great success with LESS.

As for grouping, it works for me with that LESS sugar?

http://iamkeir.com iamkeir

Really? For me, it half-works – once groups get nested too, they fall down?

http://twitter.com/martinbean Martin Bean

Not sure; I don’t really nest groups.