如果提供了LESS mixin使用顏色變量，否則使用顏色函數

Question

我需要擴展Bootstrap 3按鈕變體mixin，以便在給定的情況下采用特定的懸停顏色。 IE：

.button-variant(@color;@background;@border;@hoverColor: false) { 
     ... 
    &:hover, 
    &:focus, 
    &:active, 
    & .active, 
    .open. dropdown-toggle& { 
     color: @color; 

//出LESS

 if (@hoverColor) { 
     background-color: @hoverColor; 
    } 
    else { 
     background-color: lighten(@background, 8 %); 
     border-color: darken(@border, 12%); 
    } 

//回LESS

} 
    ... 
} 

Answer 1

一個把守混入與iscolor()會做這項工作。

（實際上，第一個例子 - 在http://www.lesscss.org/頁面頂部一路使用這一點，但進一步下跌的頁面，你還可以找到更多關於這個話題）

所以，在你的榜樣，你可以嘗試一些在這個方向上：

.button-variant(@color;@background;@border;@hoverColor: false){ 
    &:hover, 
    &:focus, 
    &:active, 
    & .active, 
    .open .dropdown-toggle { 
    color: @color; 

//所有在LESS

.bg() when (iscolor(@hoverColor)){ 
     background-color: @hoverColor; 
    } 
    .bg() when not (iscolor(@hoverColor)){ 
     background-color: lighten(@background, 8%); 
     border-color: darken(@border, 12%); 
    } 
    .bg(); 

//仍然在LESS ;-)

} 
} 

測試1：

test { 
    .button-variant(red, green, blue, black); 
} 

回報：

test:hover, 
test:focus, 
test:active, 
test .active, 
test .open .dropdown-toggle { 
    color: #ff0000; 
    background-color: #000000; 
} 

試驗2：

test { 
    .button-variant(red, green, blue); 
} 

回報：

test:hover, 
test:focus, 
test:active, 
test .active, 
test .open .dropdown-toggle { 
    color: #ff0000; 
    background-color: #00a900; 
    border-color: #0000c2; 
} 

Answer 2

如果你需要做到這一點W/O修改引導文件，你可以定義新.button-variant專業化額外的參數，如：

.button-variant(@color, @background, @border, @hover) { 
    // re-use default mixin styles: 
    .button-variant(@color, @background, @border); 
    // override hover stuff: 
    &:hover, 
    &:focus, 
    &:active, 
    &.active, 
    .open > .dropdown-toggle& { 
     background-color: @hover; 
    } 
} 

所以在調用混入的時候默認引導混入使用有三個參數，您的實現用於四個參數調用。 （請參閱Pattern-matching - > args arity示例。）