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: here。

此外，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%);
}

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

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

要获得更多想法，您可以查看 button.less 文件或mixins.less查看 .button-variants() mixin ，看看您是如何做到的可以使上面的mixin还添加一些额外的类，如.disabled等等。

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

1 个答案: