使用 Stylus 在循环中迭代时旋转色调

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/）。

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

使用 Stylus 在循环中迭代时旋转色调

Rotate color hue when iterating through a loop using Stylus

css

loops

stylus