Условный CSS на основе цветовой переменной фона

Question

Можно ли установить цвет, основанный на легкости/темноте менее переменной?

В настоящее время у меня есть следующий код:

li { 
    color: darken(@bodyBackground, 10%); 
} 

Это работает обеспечение @bodyBackground является светлым цветом. Однако если это был темный цвет, я бы хотел использовать lighten(@bodyBackground, 10%). Возможно ли это с МЕНЬШЕ?

Answer 1

Там в contrast функции, например .:

li { 
    color: contrast(@bodyBackground, 
      lighten(@bodyBackground, 13%), 
      darken(@bodyBackground, 13%)); 
} 

Answer 2

Вы можете быть гораздо умнее, чем это. Вы можете сделать подмешать проверить предоставленный цвет, а также выполнять либо темнее или светлее в зависимости от его цвета:

.smart-text-color (@a) when (lightness(@a) >= 50%) { 
    // Its a light color return a dark output 
    color: darken(@a, 60%); 
} 
.smart-text-color (@a) when (lightness(@a) < 50%) { 
    // Its a dark color return a dark output 
    color: lighten(@a, 60%); 
} 

Вот пример Mixin, который принимает цвет фона в качестве переменной, и работает, какой текст цвет в использовании. Возврат либо светлого, либо темного выхода.

http://codepen.io/TristanBrotherton/pen/GwIgx?editors=110