Question

前几天我制作了一个similar question，以便使用LOOP生成LESS变量。

今天我从同一主题开始，讲述类似话题。我有以下着色器主题：

// Colors
@color-gray:                rgb(225,225,225);
@color-black:               rgb(15,15,15);
@color-blue:                rgb(37,117,237);
@color-red:                 rgb(222,44,59);
@color-yellow:              rgb(255,200,0);
@color-green:               rgb(44,159,66);
@color-white:               rgb(255,255,255);

// Colors Dark
@color-gray-dark:           rgb(179,182,183);
@color-black-dark:          rgb(0,0,0);
@color-blue-dark:           rgb(26,82,165);
@color-red-dark:            rgb(178,35,47);
@color-yellow-dark:         rgb(204,160,0);
@color-green-dark:          rgb(35,127,53);

// Colors Light
@color-gray-light:          rgb(240,240,240);
@color-black-light:         rgb(55,55,55);
@color-blue-light:          rgb(146,186,246);
@color-red-light:           rgb(239,150,157);
@color-yellow-light:        rgb(255,228,128);
@color-green-light:         rgb(150,207,161);

Seven-phases-max 已经回答了我：

无法动态“生成”变量

那么，如何优化类似着色器的创建呢？如果可以生成变量，理想的行为应该将“暗”或“亮”参数传递给循环每个“标准”颜色变化的函数，然后自动生成暗或亮版本。

关于它的一些建议？

Answer 1

我不确定我是否完全理解你的问题，但不久前我不得不面对类似的问题并通过使用LESS mixins作为函数并基于主色（例如背景色）来解决它，决定使用哪种变体（浅色或深色）。

E.g。

@mainColor: #F4F8F8;

.generate(@color) when (lightness(@color) >= 50%) {
    // 'Color variables here'
}

.generate(@color) when (lightness(@color) < 50%) {
    // 'Color variables here'
}


.generate(@mainColor);

不确定它是否符合您的要求。

干杯。

LESS：根据参数生成颜色集的暗色或浅色变化

1 个答案: