Less compiler error on bootstrap

Question

I am porting a Node/backbone based website to django and struggling to extract the site css from the less files.

I tried initially to extract the CSS from a browser, but something breaks during rendering and everything is off if I use that.

I need to compile the existing less files into css, and I'm trying with lessc

Here is the error i get :

[rep@localhost style]$ node --version
v0.10.26

[rep@localhost style]$ lessc --version
lessc 1.7.0 (LESS Compiler) [JavaScript]

[rep@localhost style]$ lessc base.less
ParseError: Unrecognised input in /home/rep/style/bootstrap/mixins.less on line 549, column 3:
548 
549   .core (@gridColumnWidth, @gridGutterWidth) {
550 

The offending code is this :

// The Grid
#grid {
.core (@gridColumnWidth, @gridGutterWidth) 
{

  .spanX (@index) when (@index > 0) 
  {
    (~".span@{index}") { .span(@index); }
    .spanX(@index - 1);
  }

  .spanX (0) {}

  .offsetX (@index) when (@index > 0) 
  {
    (~".offset@{index}") { .offset(@index); }
    .offsetX(@index - 1);
  }
  .offsetX (0) {}

  .offset (@columns) 
  {
    margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
  }

  .span (@columns) 
  {
    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
  }

  .row 
  {
    margin-left: @gridGutterWidth * -1;
    .clearfix();
  }

  [class*="span"] 
  {
    float: left;
    margin-left: @gridGutterWidth;
  }

  // Set the container width, and override it for fixed navbars in media queries
  .container,
  .navbar-static-top .container,
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container { .span(@gridColumns); }

  // generate .spanX and .offsetX
  .spanX (@gridColumns);
  .offsetX (@gridColumns);

}

.fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {

.spanX (@index) when (@index > 0) {
  (~".span@{index}") { .span(@index); }
  .spanX(@index - 1);
}
.spanX (0) {}

.offsetX (@index) when (@index > 0) {
  (~'.offset@{index}') { .offset(@index); }
  (~'.offset@{index}:first-child') { .offsetFirstChild(@index); }
  .offsetX(@index - 1);
}
.offsetX (0) {}

.offset (@columns) {
  margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
  *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
}

.offsetFirstChild (@columns) {
  margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
  *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
}

    .span (@columns) {
      width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
      *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
    }

    .row-fluid {
      width: 100%;
      .clearfix();
      [class*="span"] {
        .input-block-level();
        float: left;
        margin-left: @fluidGridGutterWidth;
        *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
      }
      [class*="span"]:first-child {
        margin-left: 0;
      }

      // generate .spanX and .offsetX
      .spanX (@gridColumns);
      .offsetX (@gridColumns);
    }

      }



 .input(@gridColumnWidth, @gridGutterWidth) {
    .spanX (@index) when (@index > 0) {
      (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
      .spanX(@index - 1);
    }
    .spanX (0) {}

    .span(@columns) {
      width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
    }

    input,
    textarea,
    .uneditable-input {
      margin-left: 0; // override margin-left from core grid system
    }

    // Space grid-sized controls properly if multiple per line
    .controls-row [class*="span"] + [class*="span"] {
      margin-left: @gridGutterWidth;
    }

    // generate .spanX
    .spanX (@gridColumns);

  }

}

Answer 1

I had the exact same issue using Bootstrap v2.1.1 I had to revert all the way back to less v 1.3.x to get this working