Question

The Bootstrap vertical gradient mixin is defined as follows:

#gradient {
  .vertical (@start-color, @end-color) when (@disable-filters)  {
    /* code */
  }
}

I’m calling .#gradient > .vertical(#fff, #ddd); in my LESS. But compiling gives me the following error.

ParseError: Syntax Error on line 104 in front.less:104:8
103         border-bottom: 2px solid white;
104         .#gradient > .vertical(#fff, #ddd);
105       }

Commenting out the line above fixes the issue. What’s the proper way to invoke Bootstrap’s vertical gradient mixin?

Answer 1

I think there may be a typo in the Bootstrap v2.2.2 docs for some of the gradient mixins. If you check the mixins.less file it looks like you don’t need the leading dot when calling the gradient mixin, ie
#gradient > .vertical(#999, #fff);

I have this working.

On an html page I have a div with ID=gradient-test

In my custom mixin I have:

#gradient-test{  
#gradient > .vertical(#999, #fff);  
}

Good luck!