Смешивание градиента бутстрапа LESS в бутстрапе 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

Вы не можете сохранить выходной сигнал LESS mixin в переменную. Смешины должны смешиваться с правилом. Читайте больше на LESS: here.

Кроме того, bootstrap @btn-default-bg содержит цвет, который используется, например, для смесителя .button-variant(), чтобы установить свойство background-color, поэтому он не может удерживать градиент.

Таким образом, для создания кнопки с начальной загрузкой 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(); 
    } 
} 

Тогда вы можете использовать эту подмешать в вашей кнопки, как это:

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

Или вы можете увидеть, как .btn-styles() mixin разработан и используется в файле theme.less.

Смесин можно повторно использовать в других кнопках, таких как кнопка «опасность», «успех» или «информация». Но вы можете таким же образом (вместо создания mixin) просто используйте метод градиента bootstrap непосредственно в правиле кнопки - если вы просто определяете одну кнопку.

Чтобы получить больше идей вы можете посмотреть в файл button.less или mixins.less проверить .button-variants() mixin и посмотреть, как вы можете сделать выше Mixin также добавить некоторые дополнительные классы, как .disabled и так далее.