更少的函数生成 css class

Question

我尝试执行任何 less 函数，这些函数将被调用以创建一些类。这是我尝试过的方式：

.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'} 但它不起作用...

Answer 1

淡入淡出函数采用颜色和淡入淡出百分比，在您的情况下，您传递的是 2 种颜色。一次传递一个。我还对@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 的旧版本，那么你必须对变量的长度进行硬编码，或者将长度分配给变量，这样你就可以在任何地方使用它

更少的函数生成 css class

less function to generate css class

less