使用手写笔

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色库（在这里找到：https://github.com/jquery/jquery-color/）。

重要说明：实施例下面是使用角度的变化（色调descibed为角度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); 
       } 
      }); 
     } 
    } 
}