LESS: Generate dark or light variation of a color

2019-08-27 08:30发布

问题:

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

Seven-phases-max already answered me:

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.

Some suggestion about it?

回答1:

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).

E.g.

@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.

Cheers.



标签: less