Less 生成css类的函数更少

我试着用更少的函数来创建一些类。 以下是我尝试的方式：

.makeCssColor{@couleur) {
    .coul_@{couleur} {
         background-color: fade(~"@{couleur}, 'Fonce'", 15%);

        &.open, &:hover {
             background-color: ~"@{couleur}, 'Fonce'";
        }
        .btMod {
            background : url('/img/btModEvt_@{couleur}.png') left top no-repeat transparent;
        }
    }
}

我尝试调用它来创建类：

.makeCssColor("bleu");
.makeCssColor("rouge");

但它会产生一个错误。我找不到好办法。。。对每种颜色重复所有这些代码让我很烦恼（不止这些行代码和两种以上的颜色！）。 谁能帮我一点忙吗？：）

[编辑]

好的，感谢您的帮助，此代码不会生成错误，但CSS文件中有一个错误：

@marronFonce = #9d5a1e;

.makeCssColor(@couleur) {
    .coul_@{couleur} {
        .top {
            background-color: @couleur, 'Fonce';
        }
        .mod {
            background : url('/img/btModEvt_@{couleur}.png') left top no-repeat transparent;
        }
    }
}

.makeCssColor(marron);

将其生成到css文件中：

.coul_marron .top{background-color:marron,'Fonce'}
.coul_marron background : url('/img/btModEvt_marron.png') left top no-repeat transparent;

所以背景颜色不好：

.coul_marron .top{background-color:#9d5a1e}
.coul_marron background : url('/img/btModEvt_marron.png') left top no-repeat transparent;

我需要评估@couleur，'Fonce'：@marronFonce=>#9d5a1e。

---

我试过了{@couleur，'Fonce'}，但它不起作用…

淡入淡出功能需要一种颜色和一个淡入淡出百分比，在你的情况下，你要通过两种颜色。一次传一个。我还对@couleur做了一些调整，因为我发现有些情况下它们不需要逃逸

.makeCssColor{@couleur) {
    .coul_@{couleur} {
         background-color: fade(@couleur, 15%), fade(Fonce, 15%);

        &.open, &:hover {
             background-color: @couleur, 'Fonce';
        }
        .btMod {
            background : url('/img/btModEvt_@couleur.png') left top no-repeat transparent;
        }
    }
}

当您调用mixin时，请使用下面的命令，无需使用引号

.makeCssColor(bleu);

更新-只需传递它

.makeCssColor(@couleur, @name) {
    .coul_@{name} {
        .top {
            background-color: @couleur;
        }
        .mod {
            background : url('/img/btModEvt_@{name}.png') left top no-repeat transparent;
        }
    }
}

那么当你叫它

.makeCssColor(@marronFonce, marron);

或

另一个选择是你可以做一个循环，它更复杂，但你可以试试。我正在使用我的计算机上已有的一个示例

首先用颜色和名称定义一个变量

@sample:
    ~"0070" '#ebebe7',
    ~"08x2" '#00247a',
    ~"01k0" '#92918e';

然后循环通过它

.sample-loop ( @l ) when ( @l > 0  ) {

    @item: extract( @sample @l );
    @code: extract( @item, 1 );
    @colour: color(extract( @item, 2 ));

    .ext-@{code} {
        background-color: @colour;
    }

    .sample-loop( @l - 1 );
}

最后调用循环来生成类

.sample-loop( 3 );

---

根据less的版本，可以对

3

进行编码，使其具有动态性。如果使用较早版本的less，则必须硬编码变量的长度，或将长度指定给变量，以便在任何地方使用它

会出现什么错误？不应该

@{couleur}

是

@couleur

您没有转义该字符串。另外，据我所知，字符串

.makeCssColor（bleu）

不需要引号，而不是

.makeCssColor（“bleu”）

问题是，使用较少的转换器，我只会遇到一个错误：编译时错误较少，但没有更多信息。我试着像你说的那样更改代码，但我有同样的错误：（是的，那么错误是怎么说的？我输入了一个错误；）我刚刚更正了我的上一条评论。所以问题现在解决了？不幸的是，第二个解决方案不起作用，但它与第一个解决方案配合得很好：）非常感谢你的时间，祝你过得愉快！