引导程序3中的Bootstrap的LESS梯度混合？

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

您无法将LESS mixin输出保存到变量中.混合物意味着混合成规则.阅读更多关于LESS的信息:这里.

此外,bootstrap @btn-default-bg保持一种颜色,例如.button-variant()mixin用于设置background-color属性,因此它不能保持渐变.

所以,为了制作一个带有bootstrap mixin渐变背景的按钮,你可以沿着这些线尝试一下(这里我做了一个简单的渐变按钮mixin,你可以在按钮中使用):

.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();
  }
}

然后你可以在你的按钮中使用这个mixin,如下所示:

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

或者你可以在theme.less文件中看到.btn-styles()mixin是如何设计和使用的.

mixin可以在其他按钮中重复使用,例如危险,成功或信息按钮.但是你可以以相同的方式(而不是构建mixin)直接在按钮规则中使用bootstrap gradient mixin - 如果你只是定义一个按钮.

要获得更多想法,你可以查看button.less文件或者在mixins.less中查看.button-variants()mixin,看看如何使上面的mixin也添加一些其他的类.disabled等等.