LESS CSS：重用生成的.@ {name}类作为mixin

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

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

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

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

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

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

.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

当然,我尝试在生成类之后使用@R_262_11043@n.看起来LESS在生成它们之后不会在内部注册这些生成的类,但我可能错了.

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

谢谢你读我

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

@media (max-width: 1024pX) {
    #genSomething(something,somethingParam1,...);
    #genSomething(somethingElse,somethingElseParam1,...);
    #genstuff(stuff,stuffParam1,...);
}
@media (max-width: 240pX) {
    #genSomething(something,somethingParam2,somethingElseParam2,stuffParam2,...);
}
// etc

解决方案/测试用例

这是@marTinTurjak解决方案的测试用例,我可以确认这是按预期工作的,嵌套类和所有内容：

.explicit {
  margin-top: 1;
  input { margin-top: 1; }
}
.reuseExplicit {
  .explicit;
  margin-bottom: 1;
}
#generator (@arg) {
  margin-top: @arg;
  input {
    margin-top: @arg;
  }
}
.generated { #generator(1); }
.reuseGenerated {
  .generated;
  margin-bottom: 1;
}

哪个正确生成:(注意显式/生成如何产生相同的结果)

.explicit {
  margin-top: 1;
}
.explicit input {
  margin-top: 1;
}
.reuseExplicit {
  margin-top: 1;
  margin-bottom: 1;
}
.reuseExplicit input {
  margin-top: 1;
}
.generated {
  margin-top: 1;
}
.generated input {
  margin-top: 1;
}
.reuseGenerated {
  margin-top: 1;
  margin-bottom: 1;
}
.reuseGenerated input {
  margin-top: 1;
}

#genMarginTop (@sizE) {
  margin-top: @size;
}

.mtStandard {#genMarginTop(40pX);}
.mtHalf {#genMarginTop(20pX);}

.someClass {
  BACkground-color: #FFF;
  .mtStandard;
  //more of this stuff
}

#bggenerator (@color) {
    BACkground-color: @color;
 }
 #bggenerator (@color,dark) {
    @blend : @color + #842210;
    BACkground-color: darken(@blend,30%);
 }
 #bggenerator (@color,@url,@rest) {
    BACkground: "@{Color} url('@{url}') @{rest}";
 }

 .mtStandard {
    #genMarginTop(40pX);
 }

.someClass {
  .mtStandard;
  #bggenerator(#FFF,"bgimage.png",left top no-repeat);
  //more of this stuff
}