CODEWITHSUNDEEP
twitter-bootstrapless
MemesisZX
MemesisZX

Reputation: 31

Error compiling bootstrap.less. what did I miss

every time when I try to compile my own .less file, I get the following error:

SyntaxError: variable @height, visibility is undefined in {web root}/resources/less/bootstrap/component-animations.less on line 31, column 3:
30   overflow: hidden;
31   .transition-property(~"height, visibility");
32   .transition-duration(.35s);

I use the Less compiler in NetBeans so I don't write all the less command, but this is the one that is being executed:

"/bin/bash" "-lc" "\"/usr/local/bin/lessc\" \"--source-map\" \"--source-map-rootpath=../less\" \"--source-map-url=extraStyle.css.map\" \"--clean-css\" \"{web root}/resources/less/extraStyle.less\" \"{web root}/resources/css/extraStyle.css\""

And in this file the error occurs:

//
// Component animations
// --------------------------------------------------

// Heads up!
//
// We don't use the `.opacity()` mixin here since it causes a bug with text
// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552.

.fade {
  opacity: 0;
  .transition(opacity .15s linear);
  &.in {
    opacity: 1;
  }
}

.collapse {
  display: none;
  visibility: hidden;

  &.in      { display: block; visibility: visible; }
  tr&.in    { display: table-row; }
  tbody&.in { display: table-row-group; }
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  .transition-property(~"height, visibility");
  .transition-duration(.35s);
  .transition-timing-function(ease);
}

I can't find anything about this problem. Can someone help me with this?

Upvotes: 0

Views: 1309

Answers (2)

Bass Jobsen
Bass Jobsen

Reputation: 49054

The .transition-property() mixin of Bootstrap has been defined in less/mixins/vendor-refixes.less

As far as i understand you can only reproduce this error when using @@transition; instead of @transition; in the .transition-property() mixin. The official BS source code does not contain such an error. Possible you define a .transition-property() mixin in your extraStyle.less which contains a @@transition;? Notice that the Less compiler compiles all matching mixins.

To code you try to compile will compile something like:

.mixin(@list) {
property: @list;
p2: @list;
}

.selector {
.mixin(~"1 2");
}

outputs:

.selector {
  property: 1 2;
  p2: 1 2;
}

This syntax should also work in earlier versions of Less.

Notice as already mentioned when i change the mixin above as follows:

.mixin(@list) {
property: @@list;
p2: @list;
}

The above results in SyntaxError: variable @1 2 is undefined in

Upvotes: 1

MemesisZX
MemesisZX

Reputation: 31

I finally came to the conclusion that I had two mixins with the same name but with a different approach for the variables. I did not notice it because the second mixin was in another .less file (a mixin library). after having the file excluded from import everything worked fine again.

At the moment I use Lessc 2.2.0 (newest on npm) So maybe an idea for version 2.2.1, a check for double mixins (or only there names)

Thank you for your time anyway!!!

Upvotes: 0

Related Questions