Поворот оттенка цвета при переборе цикла с помощью стилуса

Question

Как я могу раскрутить оттенок цвета для каждого элемента в цикле.

Если у меня есть:

items = {
   item1: 'item1',
   item2: 'item2',
   item3: 'item3'
}

Для каждого элемента в этом списке я хочу изменить его оттенок на 30%

Что-то вроде этого:

for name, item in items
  .{name}
     color: hue(green, 30%)

Answer 1

Если вы нацелены на использование только CSS, без javascript-решения, я бы порекомендовал использовать LessHat или аналогичную инфраструктуру (подробности о ротации оттенков для LessHat можно найти здесь: https://github.com/madebysource/lesshat/blob/master/mixins/hue-rotate/hue-rotate.md). Вы можете статически генерировать список повернутых элементов, однако он будет работать только для данного (и постоянного) списка элементов.

Используя стилус, вы можете попробовать:

items = {
   'item1': {
    'color': red
    'index': '1'
   }
   'item2': {
    'color': green
    'index': '2'
   }
   'item3': {  
    'color': blue
    'index': '3'
   }
}

for key, value in items
  .{key}
    color: hue(value[color], 30% * value[index])

Если вы хотите динамически изменять оттенок заданных элементов, вы должны использовать Javascript - я бы порекомендовал использовать библиотеку JQuery Color (находится здесь: https://github.com/jquery/jquery-color/).

ВАЖНОЕ ПРИМЕЧАНИЕ: Пример ниже использует изменения угла (оттенок описывается как угол между 0 и 360, если он будет описан в процентах, красный не будет затронут, потому что его значение равно 0 град).

Пример можно найти здесь: http://jsfiddle.net/5r5w4x7g/4/

var changeHue = function(angle) {
    // Check if angle is between 0 and 360   
    if (angle) {
        if(angle>= 0 && angle<= 360) {
            classes.forEach(function(cls) {  
                // Get element with class
                var element = $('.'+cls);
                if(element.length) {                    
                    // Get current color and build JQuery Color object
                    var currentColorStr = element.css('background-color');
                    var color = $.Color(currentColorStr);
                    var hue = color.hue();                    
                    // Change hue by percentage and round it
                    hue = +hue + (+angle);
                    color = color.hue(hue);                    
                    // Set new color
                    element.css('background-color', color);
                }
            });
        }
    }
}