相关疑难解决方法(0)

我正在使用LESS CSS 1.3.3.对不起,如果已经提出这个问题,我在网上找不到任何相关内容.

我有几个看起来像这样的类生成器(示例非常简化,足以触发错误):

#genMarginTop (@name, @size) {
    .@{name} { margin-top: @size; }
}

然后我用它们来生成一些实际的类:

#genMarginTop(mtStandard, 40px);
#genMarginTop(mtHalf, 20px);

到目前为止,很好,LESS正确生成了这些类,我可以在HTML中使用它们.但是,当我想在其他地方重用这样生成的类作为mixin时,我收到一个错误:

.someClass {
    .mtStandard; // won't work, see error below
    // more stuff
}

我得到的错误是:

NameError: .mtStandard is undefined in /.../example.less:161:4
160 .someClass {
161     .mtStandard;
162     // more stuff

当然,我尝试在生成类之后使用mixin .它看起来像 LESS以某种方式在生成它们之后不会在内部注册这些生成的类,但我可能错了.

有没有办法在其他类中重用这些生成的类作为mixins？作为LESS的新手,他们的文档对生成的类相当稀疏,我完全失去了(特别是因为这是mixins似乎接受的唯一语法).

谢谢你读我

注意:我使用这样的类生成器的原因是因为它们比上面的例子复杂得多(想想所有依赖于一组公共参数的嵌套类),并且我将生成的类嵌入到各种@media查询中以支持任何设备类型采用"Zen"方式.最后我得到了类似的东西:

@media (max-width: 1024px) {
    #genSomething(something, somethingParam1, ...);
    #genSomething(somethingElse, somethingElseParam1, ...);
    #genStuff(stuff, stuffParam1, ...);
}
@media (max-width: 240px) { …

我想要一个带有自定义字体,颜色和左侧子弹的标题的CSS选择器.所以我希望我的标题使用我的自定义字体,并且:before使用font-awesome 是伪元素.所以我希望我:before有这个.fa类,而整个元素没有这个类.

我有这个HTML:<h1 class="bulleted-header">Hello</h1>我想在LESS写这样的东西:

.bulleted-header {
    color: #61cbe6;
    font: 16px 'ds_goose', sans-serif;
    &:before {
        content: @fa-var-bullseye; // font-awesome's bullet icon
        .fa; // calling font-awesome's class. DOESN'T COMPILE
    }
}

问题是.fa类在font-awesome LESS源中声明如下:.@{fa-css-prefix} { ... }所以上面的代码不能编译.我试图重用这样的.fa代码:

&:before {
    content: @fa-var-bullseye; // font-awesome's bullet icon
    .@{fa-css-prefix}; // DOESN'T COMPILE
}

和这样:

&:before:extend(.@{fa-css-prefix}) { // compiles but no effect
    content: @fa-var-bullseye; // font-awesome's bullet icon
}

我知道我可以像这样改变我的html <h1 class="bulleted-header"><span class …

合乎逻辑的方式是:

.mymixin() {
  sample_key: samplevalue;
}

@avar:  mymixin;
.@{avar}();

但我得到一个解析错误.

有办法吗？