LESS中的动态类名 [英] Dynamic class names in LESS

问题描述

我有以下位的LESS代码工作

I have the following bit of LESS code working

            @iterations: 940;
            @iterations: 940;
            @col:2.0833333333333333333333333333333%;
            // helper class, will never show up in resulting css
            // will be called as long the index is above 0
            .loopingClass (@index) when (@index > -20) {
                // create the actual css selector, example will result in
                // .myclass_30, .myclass_28, .... , .myclass_1
                (~".gs@{index}") {
                    // your resulting css
                    width: (@index/20+1)*@col;
                }
                // next iteration
                .loopingClass(@index - 60);
            }
            // end the loop when index is 0
            .loopingClass (-20) {}
            // "call" the loopingClass the first time with highest value
            .loopingClass (@iterations);

这样输出网格系统：

            .gs940 {
              width: 100%;
            }
            .gs880 {
              width: 93.75%;
            }
            .gs820 {
              width: 87.5%;
            }
            .gs760 {
              width: 81.25%;
            }
            .gs700 {
              width: 75%;
            }

等等

现在我想要做的是类名字数学生成以下类

Now what I want to do is some math to the class names to produce the following classes

            .gs220-700
            .gs280-640
            .gs340-580
            .gs400-520
            .gs460-460
            .gs520-400
            .gs580-340
            .gs640-280
            .gs700-220

等等

基本上是
。（@ index） - （920px minus @index）

basically this would be .(@index) - (920px minus @index)

但我不知道if这是可能的。

But I have no idea if this is possible.

推荐答案

我不认为你很远。我做的是在mixin中创建一个名为 @ index2 的第二个变量。所有这一切是找到你正在寻找的'920px减去@index'值：

I don't think you're far off. What I've done is create a second variable inside the mixin, called @index2. All this does is find the '920px minus @index' value that you're looking for:

@index2 = (920-@index);

这将附加到类名称：

(~".gs@{index}-@{index2}") {

这是完整的循环：

.loopingClass (@index) when (@index > 160) {
    @index2 = (920-@index);
    // create the actual css selector, example will result in
    // .myclass_30, .myclass_28, .... , .myclass_1
    (~".gs@{index}-@{index2}") {
    // your resulting css
        width: (@index/20+1)*@col;
    }
    // next iteration
    .loopingClass(@index - 60);
}
// "call" the loopingClass the first time with highest value
.loopingClass (@iterations);

为了获得正在寻找的集合（gs220-700到gs700-220）只需将 @iterations 更改为等于700.

In order to get just the set you are looking for (gs220-700 to gs700-220), just change @iterations to equal 700.

值得注意的是，目前，如何在问题中指定它们。

Worth noting that currently, this will create the classes in the reverse order of how you specified them in the question.

这篇关于LESS中的动态类名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！