Bootstrap's LESS gradient mixins in bootstrap 3?

Question

@btn-font-weight:     normal;
@btn-default-color:   @brand-primary;
@btn-default-bg:      .#gradient.vertical(@brand-primary; @brand-secondary; 0%; 10%);   
@btn-default-border:  #ccc;

Answer 1

You can not save a LESS mixin output into a variable. Mixins are meant to be mixed into a rule. Read more on LESS: here.

In addition, bootstrap @btn-default-bg holds a color that is used for example by the .button-variant() mixin to set the background-color property, so it can not hold a gradient.

So, for making a button with the bootstrap mixin for gradient backgrounds you could try something along these lines (here I make a simple gradient button mixin, that you can use in buttons):

.gradient-button(@color, @borderColor, @startColor, @endColor, @startPercent, @endPercent, @degradeColor: @startColor) {
  color: @color;
  border-color: @borderColor;
  background-color: @degradeColor;
  #gradient > .vertical(@startColor, @endColor, @startPercent, @endPercent));
  .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners

  &:hover,
  &:active {
    color: @color;
    border-color: darken(@borderColor, 12%);
    background-color: darken(@degradeColor, 8%);
    #gradient > .vertical(darken(@startColor, 8%), darken(@endColor, 8%), @startPercent, @endPercent);
    .reset-filter();
  }
}

Then you can use this mixin in your button like this:

/* your default button */
.btn-default {
  .gradient-button(@brand-text-color, @brand-border, @brand-primary, @brand-secondary, 0%, 10%);
}

Or you can see how the .btn-styles() mixin is designed and used in the theme.less file.

A mixin can be reused in other buttons like the danger, success or info button. But you can in the same way (instead of building the mixin) just use the bootstrap gradient mixin directly in the button rule - if you are just defining one button.

To get some more ideas you can look into the button.less file or in mixins.less check out the .button-variants() mixin and see how you can make the above mixin also add some additional classes like .disabled and so on.