根據基本顏色爲LESS創建變量列表

Question

在我們的項目中，我們使用LESS變量列表。在這個列表中我們有多種顏色。例如：

@color-gray: #B9B9BA; 

@color-gray-light: lighten(@color-gray, 10%); 
@color-gray-lighter: lighten(@color-gray, 20%); 
@color-gray-lightest: lighten(@color-gray, 25%); 
@color-gray-dark: darken(@color-gray, 10%); 
@color-gray-darker: darken(@color-gray, 20%); 
@color-gray-darkest: darken(@color-gray, 25%); 

除了這個灰色，我們還有其他顏色。所以我想製作一個mixin，爲其他顏色創建這個變量列表。

第一種顏色被定義。例如：@ color-purple：＃915E9F;我想混合創建剩餘的變量，完全基於這個變量。

// Color - Purple  
@color-purple: #915E9F; 

// Color variants generated by LESS for purple 
@color-purple-light: lighten(@color-purple, 10%); 
@color-purple-lighter: lighten(@color-purple, 20%); 
@color-purple-lightest: lighten(@color-purple, 25%); 
@color-purple-dark: darken(@color-purple, 10%); 
@color-purple-darker: darken(@color-purple, 20%); 
@color-purple-darkest: darken(@color-purple, 25%); 

這些變量稍後將用於遍佈應用來彌補造型的按鈕，標題等，我已經有混合，使這些按鈕，標題，變體。

Answer 1

這是你想要做的嗎？

@color-gray: #B9B9BA; 


.colorset(@color) { 
    @color-light: lighten(@color, 10%); 
    @color-lighter: lighten(@color, 20%); 
    @color-lightest: lighten(@color, 25%); 
    @color-dark: darken(@color, 10%); 
    @color-darker: darken(@color, 20%); 
    @color-darkest: darken(@color, 25%); 
} 


.class{ 
    .colorset(@color-gray); 
    color:@color-light; 
} 

演示：http://codepen.io/blonfu/pen/ezBEje

Answer 2

據我知道你不能混入創建動態變量。但是如果你願意重新思考你的邏輯，你可以這樣做：

.color-light (@colorItem) { 
    @color-light: lighten(@colorItem, 10%); 
} 
.color-lighter (@colorItem) { 
    @color-lighter: lighten(@colorItem, 20%); 
} 
.color-lightest (@colorItem) { 
    @color-lightest: lighten(@colorItem, 25%); 
} 
.color-dark (@colorItem) { 
    @color-dark: darken(@colorItem, 10%); 
} 
.color-darker (@colorItem) { 
    @color-darker: darken(@colorItem, 20%); 
} 
.color-darkest (@colorItem) { 
    @color-darkest: darken(@colorItem, 25%); 
} 

.class{ 
    .color-light(@color-gray); 
    color:@color-light; 
}