0

我想通过创建某种循环函数来使以下代码更易于维护（但不太容易理解），该函数将使用我的 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 个块之一的样式，然后在每个块中生成相同的样式（带有颜色参数）？而且，这是什么方法？

4

2 回答 2

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

于 2013-08-01T04:28:42.037 回答
1

有一个错误阻止了完美的方法

这是使用 LESS 1.4+。以下实现了它，但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); }

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

错误说明：

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

较少的

@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 */

}
于 2013-08-01T05:32:18.763 回答