Question

我想通过创建某种使用我的LESS解析器创建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%);
            }
        }
    }

如果我有一个功能可以A）遍历所有颜色（ebay，google-shopping等），然后是另一个能输出正确颜色样式的函数，那就太棒了。

问题

有没有办法将我的颜色存储在一个数组中，并且有一个函数接受上述6个块之一的样式，然后在每个块中生成相同的样式（带有颜色参数）？那是什么意思？

Answer 1

我想你可以这样做：

.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更改为您想要的任何内容。

Answer 2

有一个阻止完美方法的Bug

这是使用LESS 1.4+。以下实现了这一点，但由于当前LESS中的错误，lighten()必须被预测（请参阅解决方案后的解释）。

<强> LESS

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

获取该课程的原始所需输出。

BUG EXPLANATION：

理想情况下，代码将是这样的：

<强> LESS

@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输出显示LESS没有处理颜色转换正确，因此lighten()函数失败（它会产生编译错误），因为@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 */

}

简单地使用LESS功能就可以了

2 个答案:

有一个阻止完美方法的Bug

BUG EXPLANATION：