在 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%);

这些变量稍后将在整个应用程序中用于构成按钮的样式，headers，等等。我已经混合了这些按钮，headers，变体。

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

据我所知，您不能在 mixin 中创建动态变量。但是如果你愿意重新思考你的逻辑，你可以这样做：

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

在 LESS 中为基于基色的颜色变体创建变量列表

Create a variable list in LESS for colors variants based on a base color

css

less

less-mixins