简单地使用更少的函数来修改我的

Question

我希望通过创建某种循环函数来提高以下代码的可维护性(但更容易理解)，它将使用我的更少的解析器来创建CSS代码；

.box {
        &.ebay {
            background-color:@ebay-color;
            h2, p{
                color: lighten(@ebay-color, 15%);
            }
        }
        &.google-shopping {
            background-color:@google-shopping-color;
            h2, p{
                color: lighten(@google-shopping-color, 15%);
            }
        }
        &.website {
            background-color:@website-color;
            h2, p{
                color: lighten(@website-color, 15%);
            }
        }
        &.feed {
            background-color: @feed-color;
            h2, p{
                color: lighten(@feed-color, 15%);
            }
        }
        &.twitter {
            background-color: @twitter-color;
            h2, p{
                color: lighten(@twitter-color, 15%);
            }
        }
        &.facebook {
            background-color:@facebook-color;
            h2, p{
                color: lighten(@facebook-color, 15%);
            }
        }
    }

所以，如果我有一个函数来循环所有的颜色(易趣，谷歌购物等)，然后再用正确的颜色输出样式，那岂不是太棒了。

问题

是否有一种方法可以将我的颜色存储在一个数组中，并有一个函数可以接受上述6个块中的一个，然后在每个块中生成相同的样式(包含颜色的参数)？这条路是什么？

Answer 1

有一个Bug阻止了完美的方法

这是使用较少的1.4+。以下内容实现了这一点，但是lighten()必须预先完成，因为当前出现了一个较少的bug (请参阅后面的解释)。

减

@numAssociations: 6;
@Associations: ebay google-shopping website feed twitter facebook;
@ebay-color: #ff0000;
@ebay-color-contrast: lighten(@ebay-color, 15%);
@google-shopping-color: #0000ff;
@google-shopping-color-contrast: lighten(@google-shopping-color, 15%);
@website-color: #ffff00;
@website-color-contrast: lighten(@website-color, 15%);
@feed-color: #ffffff;
@feed-color-contrast: lighten(@feed-color, 15%);
@twitter-color: #ffc0cb;
@twitter-color-contrast: lighten(@twitter-color, 15%);
@facebook-color: #ffa500;
@facebook-color-contrast: lighten(@facebook-color, 15%);

//loop code
.buildClassColorAssociations(@i) when (@i =< @numAssociations) {
  @className: extract(@Associations, @i);
  @bkgColor:  ~'@{@{className}-color}';
  @color:  ~'@{@{className}-color-contrast}';
  &.@{className} {
    background-color: @bkgColor;
    h2, p {
      color: @color;
    }
  }
  .buildClassColorAssociations(@i + 1);
}
//end the loop
.buildClassColorAssociations(@i) when (@i = (@numAssociations + 1)) {}
//call the loop
.buildClassColorAssociations(1);

CSS输出

.ebay {
  background-color: #ff0000;
}
.ebay h2,
.ebay p {
  color: #ff4d4d;
}
.google-shopping {
  background-color: #0000ff;
}
.google-shopping h2,
.google-shopping p {
  color: #4d4dff;
}
.website {
  background-color: #ffff00;
}
.website h2,
.website p {
  color: #ffff4d;
}
.feed {
  background-color: #ffffff;
}
.feed h2,
.feed p {
  color: #ffffff;
}
.twitter {
  background-color: #ffc0cb;
}
.twitter h2,
.twitter p {
  color: #ffffff;
}
.facebook {
  background-color: #ffa500;
}
.facebook h2,
.facebook p {
  color: #ffc04d;
}

当然，这可以嵌套在任何类中，所以只需从内部调用mixin即可。

.box { .buildClassColorAssociations(1); }

以获得该类的原始、所需输出。

错误解释：

理想情况下，代码应该如下所示：

减

@numAssociations: 6;
@Associations: ebay google-shopping website feed twitter facebook;
@ebay-color: #ff0000;
@google-shopping-color: #0000ff;
@website-color: #ffff00;
@feed-color: #ffffff;
@twitter-color: #ffc0cb;
@facebook-color: #ffa500;

//loop code
.buildClassColorAssociations(@i) when (@i =< @numAssociations) {
  @className: extract(@Associations, @i);
  @color:  color(~'@{@{className}-color}'); //<-- color conversion fails, yet is
                                               needed for lighten() to work so...
  &.@{className} {
    background-color: @color;
    h2, p {
      color: lighten(@color,15%); //<-- ... lighten fails, making a compile error
    }
  }
  .buildClassColorAssociations(@i + 1);
}
//end the loop
.buildClassColorAssociations(@i) when (@i = (@numAssociations + 1)) {}
//call the loop
.buildClassColorAssociations(1);

但是，CSS输出显示，较少处理颜色转换不正确，因此lighten() @color 函数失败(它会产生编译错误)，因为@color正在生成CSS输出：。

.ebay {
  background-color: #NaNeebbaaNaNNaNccNaNNaNNaNNaNNaN;
}
.ebay h2,
.ebay p {
  /* color: lighten(@color,15%); yields an error */

}
.google-shopping {
  background-color: #NaNNaNNaNNaNNaNNaNeeNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNccNaNNaNNaNNaNNaN;
}
.google-shopping h2,
.google-shopping p {
  /* color: lighten(@color,15%); yields an error */

}
.website {
  background-color: #NaNNaNeebbNaNNaNNaNeeNaNccNaNNaNNaNNaNNaN;
}
.website h2,
.website p {
  /* color: lighten(@color,15%); yields an error */

}
.feed {
  background-color: #NaNffeeeeddNaNccNaNNaNNaNNaNNaN;
}
.feed h2,
.feed p {
  /* color: lighten(@color,15%); yields an error */

}
.twitter {
  background-color: #NaNNaNNaNNaNNaNNaNeeNaNNaNccNaNNaNNaNNaNNaN;
}
.twitter h2,
.twitter p {
  /* color: lighten(@color,15%); yields an error */

}
.facebook {
  background-color: #NaNffaacceebbNaNNaNNaNNaNccNaNNaNNaNNaNNaN;
}
.facebook h2,
.facebook p {
  /* color: lighten(@color,15%); yields an error */

}

Answer 2

我想你可以这么做：

.fn(@color) {
    background-color: @color;
    h2, p{
        color: lighten(@color, 15%);
    }
}

.box {
    &.ebay {
        .fn(@ebay-color);
    }
    &.google-shopping {
        .fn(@google-shopping-color);
    }
    &.website {
        .fn(@website-color);
    }
    &.feed {
        .fn(@feed-color);
    }
    &.twitter {
        .fn(@twitter-color);
    }
    &.facebook {
        .fn(@facebook-color);
    }
}

将.fn更改为任何您想要的。