Sublime Forum

LESS compiling (newbie)

#1

Sublime Text 2 build 2210, Ubuntu 12.04.

I’ve installed the package manager and both LESS packages (LESS and LESS-build), and now I’m trying to compile my first LESS script. I’ve set my Build System to LESS, but when I try to Build, I get the following error:

[Errno 2] No such file or directory
[cmd: [u’lessc’, u’/home/mattshepherd/Dropbox/Writer/Reacher/css/reacher.less’, u’/home/mattshepherd/Dropbox/Writer/Reacher/css/reacher.css’, u’–verbose’]]
[dir: /home/mattshepherd/Dropbox/Writer/Reacher/css]
[path: /usr/lib/lightdm/lightdm:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games]
[Finished]

I’m not sure what I’m doing wrong. Halp?

0 Likes
#2

make sure you have the path to whatever you are compiling a LESS script set in your environment variables (IDK how to do that on LINUX)

Make sure you have your build system set up right, I’ve only worked on my own C++ build system but the API should be similar.

{ "cmd" : "g++", "$file_name", "-o", "${file_base_name}.exe"], "selector" : "source.c", "shell":false, "working_dir" : "$file_path" }

Notice the working directory specification, as well as the use of $file_name in “cmd”, that gives a complete path to the source file which is important.

I remember reading documentation for the ST2 build systems about how linux had specific obligations to be written into a build system, read up on that at http://sublimetext.info/docs/en/reference/build_systems.html

0 Likes
#3

My guess is that you do not have a less compiler installed. Since you’re on Ubuntu, try sudo apt-get install node-less in a terminal and you should be set.

(Since we’re on the subject, the LESS plugin provides the syntax highlighting; the LESS-build plugin provides the build system, which requires the external compiler.)

0 Likes
#4

I’m using this build system for sass:

{ "cmd" : "sass $file $file_path\\..\\screen.css --style compressed"], "selector" : "source.scss", "working_dir": "$file_path", "shell" : true }

this assumes that the folder structure is somehow like:

[code]css

  • sass/screen.scss
  • screen.css[/code]

You can also launch a watcher (sass --watch), which is faster (at least on my machine; i’m using the build system only ocasionally, when i only have to do small changes.

0 Likes
#5

Installing the compiler in Linux definitely helped – thanks!

Things now seem to be working, but it’s throwing this error:

[quote]e[31mParseError: Syntax Error on line 4e[39me[31m in e[39m/home/mattshepherd/Dropbox/Writer/Reacher/css/reacher.lesse[90m:4:0e[39m
e[90m3 @colourLight: #FFB273;e[39m
4 e[7me[31me[1m@e[22mcentered: text-align: center;e[39me[27m
e[90m5 e[39me[0m

[Finished in 0.1s with exit code 1][/quote]

As said above, I’m not really very hardcore – I appreciate the suggestions on how to write or re-code my own build systems, but I don’t know the first thing about it. I may do the follow-up reading imntz recommends, but I have a feeling that even it will be wayyyyy over my head.

0 Likes
#6

That’s an error of the lessc compiler because centered: text-align: center; is not correct LESS. You probably mean to define a class, in which case you would use something like:

.centered {
    text-align: center;
}

So you can then write (for example):

.nav-block {
    a {
        .centered;
    }
}

Have a look at lesscss.org/ for the correct syntax.

The weird escape characters are because lessc color highlights its output. You can see this by navigating to the directory where your LESS file resides in the terminal and typing lessc reacher.lesse.

I would also recommend you use less.js + Firefox for development. It will auto-reload on save if you add #!watch at the end of the URL and also provide error output when you mess up :wink: I only compile less for cross-browser testing and uploading to the live server.

Hope this helps,
Alex

0 Likes
#7

I know the post says to ubuntu but I had the same error in windows. and this was my solution.
On Windows go to:
Sublime Text 2\Data\Packages\LESS-build
Open:
LESS.sublime-build
Change this line
“path”: “%APPDATA%\Sublime Text 2\Packages\LESS-build” //Not sure why “${packages}\LESS-build” doesn’t work
your path.

for me was like this on portable version.
“path”: “D://PortableApps//Sublime Text 2//Data//Packages//LESS-build” //Not sure why “${packages}\LESS-build” doesn’t work

::::::::::::::::::::::::::::::::::::::::::::::::

0 Likes
#8

@Mayccoll Your solution is to a different, Window-only problem. (I can tell having had all of them above happen to me :confused: ) Incidentally, after a little bit of head-scratching, I managed to get a build for Windows that uses relative paths:

"windows":
	{
		"cmd": "$packages/LESS-build/dotless.Compiler.exe", "$file"]
	},

(Remove or comment out the path entirely.)

Alex

0 Likes