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);

  }

}

In the past, I've ran into this using BS 2.x and newer versions of less compiler. Try using an older version of the less compiler and see if it works. I'm assuming you're using BS 2.x because of the `var` names. These threads may be helpful: https://github.com/paulfairless/grails-lesscss-resources/issues/45, http://stackoverflow.com/questions/23554468/can-no-longer-compile-bootstrap-2-3-2-less-with-webstorm-8-0-2-less-compile-plu — dlane, May 13 '14 at 13:02

score 1 · Accepted Answer · answered Jul 24 '14 at 18:36

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

answered Jul 24 '14 at 18:36

rphutchinson

514
1
4
8

Less compiler error on bootstrap

1 Answers1