How to call Bootstrap's LESS gradient mixins

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

The idea is the same in Bootstrap 3 (as David Taiaroa suggested) and in addition there are two additional parameters that you can pass in to control how the gradient looks:

.vertical(@start-color; @end-color; @start-percent; @end-percent)

So for example you can do something like the following in your custom.less file:

@import '../less/bootstrap.less';

.promo-content{
  #gradient.vertical(#fff; #c3c3c3; 0%; 10%);
  height:100px;
  .text-center;
  padding-top: 25px;
  margin-bottom: 10px;
  border:1px solid #e2e2e2;
}

.promo-content2{
  #gradient.vertical(#fff; #c3c3c3; 0%; 90%);
}

And you will get the following results:

Answer 2

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!