Sublime Forum

Plugin request: Less CSS converter

#1

It would be great if I could convert LESS to CSS with a single command. http://lesscss.org/

EDIT: Looks like there is a simple windows command line app http://www.dotlesscss.org/. See documentation. So making a plugin should be very simple.

1 Like

Extra chars in build results, messing with file_regex?
#2

Looks like there is a Textmate bundle…

github.com/appden/less.tmbundle

0 Likes

#3

For a quick solution for ST1.4 take a look at this thread Command to run cmd script on file.
For ST2 not implemented but you can vote for it at the link at the bottom of the thread.
You could probably create a build system for this as well.

0 Likes

#4

Looks like there is a windows commandline app for making a plugin should be easy http://www.dotlesscss.org/

0 Likes

#5

My first plugin - I’ll add it to github @atomi when time permits.
Also, this is my first time playing with python.

Comments welcomed.

import sublime, sublime_plugin, subprocess, os

class CompileLessOnSave(sublime_plugin.EventListener):
	def on_post_save(self, view):

		if not view.scope_name(0).strip().endswith('source.css.less'):
			return

		if os.name == "nt":
			startupinfo = subprocess.STARTUPINFO()
			startupinfo.dwFlags |= subprocess.STARTF_USESHOWWINDOW

		process = subprocess.Popen(('dotless.Compiler.exe','-m',view.file_name()),
		stdin=subprocess.PIPE, stdout=subprocess.PIPE, startupinfo=startupinfo)
		print('Compiled ' + view.file_name())

Thanks to adzenith btw and Default/exec.py :smile:

0 Likes

#6

I get this error

Reloading plugin C:\Users\robin\AppData\Roaming\Sublime Text 2\Packages\Less\SaveToCSS.py Traceback (most recent call last): File ".\sublime_plugin.py", line 29, in reload_plugin File ".\SaveToCSS.py", line 6 if os.name == "nt": ^ IndentationError: unindent does not match any outer indentation level

0 Likes

#7

[quote=“firefusion”]I get this error

Reloading plugin C:\Users\robin\AppData\Roaming\Sublime Text 2\Packages\Less\SaveToCSS.py Traceback (most recent call last): File ".\sublime_plugin.py", line 29, in reload_plugin File ".\SaveToCSS.py", line 6 if os.name == "nt": ^ IndentationError: unindent does not match any outer indentation level[/quote]

Change this line:

if not view.scope_name(0).strip().endswith('source.css.less'):
to this:

if not view.scope_name(0).strip().endswith('source.css.less'):
In python indentation is important. The two ifs have to line up.

0 Likes

#8

Thanks for your help. Ok, now I get this error after saving the change…

Traceback (most recent call last): File ".\sublime_plugin.py", line 29, in reload_plugin File ".\CompileLessOnSave.py", line 1, in <module> class CompileLessOnSave(sublime_plugin.EventListener): NameError: name 'sublime_plugin' is not defined

It doesn’t output a css file on save.

I have dotless.Compiler.exe set in the system path as it does work.

0 Likes

#9

I’m sorry I forgot to copy over the imports

import sublime, sublime_plugin, subprocess, os

class CompileLessOnSave(sublime_plugin.EventListener):
...
0 Likes

#10

Great! That works :smile:

Anyway I could get “sheetsheet.css.less” to compile to the name “sheetsheet.css” and not “sheetsheet.css.css”?

0 Likes

#11

Well yeah, you don’t need to name your file blah.css.less it will work with the file name blah.less just the same.

0 Likes

#12

True. I had them set to that as ZenCoding on worked if you have .css in the filename but with the new sublime-completions formatt i don’t need zen for css anymore. Great plugin. Thanks :smile:

0 Likes

#13

Thanks. It was totally your idea.

I hadn’t even heard of dotless.Compiler before this post.

Cheers.

0 Likes

#14

I’m finding this crashes dotless quite a bit on big less files or if there is an error in the file. Where as dotless always works in the cmd. Do you think there is some memory limit for apps run through sublime?

0 Likes

#15

The plugin is really basic. A lot of it is code that was directly copied from exec.py included in the Packages/Default folder.
I did crash dotless once, but that was because I was trying to import a file that didn’t exist.

But, If you’d like you can post the file that is causing the crash and I’ll check it out.
Or email it to me if you’d rather do that (pm).

0 Likes

#16

What are some good online tutorials or books to read to learn CSS? I want to re-design my website using a Photoshop template but I need to learn a little CSS first were is a good place to learn it online, or what are some good books?


affiliateelite ~ affiliateelite.com ~ adgooroo ~ adgooroo.com

0 Likes

#17

Off topic a bit but anyone managed to get “Go to symbol” working in .less files?

0 Likes

#18

Here’s a little Build System I made (linux/mac)

https://gist.github.com/1347392

0 Likes

#19

[quote="_druu"]Here’s a little Build System I made (linux/mac)

https://gist.github.com/1347392[/quote]

I can’t get this to work under the Automatic setting… and if i accidentally hit ctrl+b while it’s on my .css files… well… it tries to compile them, but since it’s already CSS it removes all whitespace >.<; not ideal.

To my understanding the “selector” of the sublime-build should be set to “source.less” for it to pick up .less files under Automatic shouldn’t it? why isn’t this working and how do I make it work?

0 Likes

#20

[quote=“Mordof”]

[quote="_druu"]Here’s a little Build System I made (linux/mac)

https://gist.github.com/1347392[/quote]

I can’t get this to work under the Automatic setting… and if i accidentally hit ctrl+b while it’s on my .css files… well… it tries to compile them, but since it’s already CSS it removes all whitespace >.<; not ideal.

To my understanding the “selector” of the sublime-build should be set to “source.less” for it to pick up .less files under Automatic shouldn’t it? why isn’t this working and how do I make it work?[/quote]

You can check what the source selector is for the current view by using the keyboaord shortcut :
ctrl+shift+alt+p

0 Likes