较少:根据参数生成颜色集的深色或浅色变化 [英] LESS: Generate dark or light variation of a color set based upon a parameter

问题描述

几天前，我提出了一个类似的问题，以便生成带有以下内容的LESS变量:一个LOOP.

Some days ago I made a similar question in order to generate LESS variables with a LOOP.

今天，我从同一个主题开始，一个相似的主题.我有以下着色剂主题:

Today I start from the same topic with a similar topic. I have the following colorizer theme:

// 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);

最大七个阶段已经回答了我:

无法动态生成"变量

There's no way to "generate" variables dynamically

那么，如何优化类似着色剂的创建?如果有可能生成变量，理想的行为应将深色"或浅色"参数传递给循环遍历每个标准"颜色变化的函数，然后自动生成深色或浅色版本.

So, how to optimize creation of a similar colorizer? If could be possible to generate variables, ideal behaviour should pass a "dark" or "light" parameter to a function that loops through each "standard" color variation and then generates dark or light version automatically.

对此有何建议?

推荐答案

我不确定我是否完全理解您的问题，但是不久前，我不得不面对一个类似的问题，并通过使用LESS mixins作为函数来解决了这个问题，并根据主要颜色(例如背景色)确定要使用的变体(浅色或深色).

I'm not sure if I fully understand your question, but not long ago I had to face a similar issue and solved it by using LESS mixins as functions, and based on a main color (e.g. background color), deciding which variant to use (light or dark).

例如

@mainColor: #F4F8F8;

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

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


.generate(@mainColor);

不确定它是否满足您的需求.

Not sure if it meets what you are looking for.

干杯.

这篇关于较少:根据参数生成颜色集的深色或浅色变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！