使用手寫筆

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