Dotless failing to compile ; in Bootstrap 3 less source

Question

I use dotless 1.3.1.0 compiling less-files. This worked fine with bootstrap 2.x, but after switching to bootstrap 3.0.0 (downloaded the source from here: http://getbootstrap.com/getting-started/), I suddenly get this error:

Expected ')' but found ' ' on line 47 in file 'mixins.less': [46]: // Sizing shortcuts [47]: .size(@width; @height) { ------------^ [48]: width: @width;

Seems that having a ; as seperator between parameters is not valid less. The original source in the mixins.less looks like this:

...
// Sizing shortcuts
.size(@width; @height) {
  width: @width;
  height: @height;
}
...

Do I have to use an updated less compiler? Or did bootstrap release buggy less source?

UPDATE 1: I can see, that a pull request for dotless exists, fixing the problem with ;

https://github.com/dotless/dotless/pulls "Fixes for ; not supported in mixin parameter lists #319 #320"

I will go using the css files until this has been fixed in dotless.

Answer 1

If you check out bootstrap's getting started page, you'll find that they state:

LESS compilation

If you download the original files, you need to compile Bootstrap's LESS files into usable CSS. To do that, Bootstrap only officially supports Recess, Twitter's CSS hinter built on top of less.js.

Though not using dotless, I followed a similar path that you did using lessc, and then found that using recess resolved my issue. Perhaps using recess would be an option for you too?

As an example, I have a file called tmpfl.less with the following contents:

@import "mixins.less";
@import "variables.less";


.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

If I run lessc on it, I get the following result:

lessc tmpfl.less 
NameError: .size is undefined in mixins.less:47:0
46 // Sizing shortcuts
47 .size(@width; @height) {
48   width: @width;

Now, I successfully use recess as follows:

recess --compile tmpfl.less > tmpfl.css

Update:

In order to utilize Recess in a .Net environment, specifically in Visual Studio, one can follow these instructions for details on installing. Those instructions provide an overview, but perhaps leave out some details on getting Node.js installed. Microsoft has some brief words about it and they link to a GitHub project which might be helpful depending on your version of Visual Studio.

If you don't go down the Node.js-in-Visual Studio route, then really the main goal is to have Node.js installed somewhere, and then ultimately npm, the package manager for Node.js so you can install Recess. That can be achieved on Windows by going to the Node.js download, and installing the Windows version. Installing npm is highlighted in this stackoverflow discussion. Once installed, you just need to run npm to install Recess as follows:

npm install recess -g

That is also discussed in the first link of this update.

Answer 2

One of my colleagues that uses dotless has had a few fixes for Bootstrap 3 issues merged. Apparently Bootstrap3 will now compile with the latest code :)

https://github.com/dotless/dotless/commits/master

I expect an updated NuGet package will be available soon (based on this tweet)

Answer 3

After spending hours on getting this to work myself i found that dotless is quite useless at this time.

but here is where you can impliment Less and Bootstrap 3 Less in your mvc ASP.Net Project

http://www.tomdupont.net/2013/10/bootstrap-3-less-bundling-and-aspnet-mvc.html?showComment=1386250367416#c1439130135847828203

This guy just won an internets in my book and if you can track down his stack exchange account for me let me know.