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

#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) {
    #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;
}

但是然后通过调用mixins / generators来构建类：

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

这样它们就是你可以用于mixin =)的类对象

.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
}

或者用参数做更令人兴奋的事情

@import (reference) "bootstrap-3.0.0/less/bootstrap.less";
@import (reference) "bootstrap-3.0.0/less/mixins.less";

仅作为参考导入.

我的app.less(其中包括)

.herocontainer{
    .make-row();
    .iphoneblock{
        .make-sm-column-offset(1);
        .make-sm-column(4);
        text-align: center;
    }
    .copyblock{
        .make-sm-column(5);
        text-align: center;
        .copytext{
            @media(min-width: @screen-sm) {
              padding-top: 100px;
              }
        }
        .buybutton{
            .btn-lg;
            .btn-primary;
            background-color: #d6822f;
            }
    }
}

生成的站点只是单列输出.但是,如果我从mixins中删除(引用),例如：

@import (reference) "bootstrap-3.0.0/less/mixins.less";

然后我得到一个两列响应输出,但生成的CSS也有我不需要的类.

所以,
a)我如何才能在css中获取我在app.less中编写的类,而不是使用bootstrap类来膨胀
b)我如何调试这样的CSS问题？ (我确实使用Google Chrome工具,但这个问题比我能理解/调试的要多)

谢谢,
约瑟夫

No actual code will output from that file as CSS,but all becomes available to use as mixins.

在你的情况下,它们将与例如make-sm-column()有所区别,这个mixin包含一个媒体查询定义.如果您在导入mixins时使用(引用).此媒体查询部分不包含在您的CSS中.

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

会给：

.herocontainer {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .herocontainer {
    float: left;
    width: 33.33333333333333%;
  }
}

使用(参考)你只会得到：

.herocontainer {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

注意你也使用来自buttons.less的btn-lg.对我而言,它似乎是引用button.less但不是mixins.less的最佳解决方案(理论mixins只应包含mixins,因此引用应该有所不同).否则只需要你需要的mixins来创建一个mixins.less.

UPDATE

>有一个错误Reference import not importing media queries>当引用导入中的类从未引用的导入调用mixin时,此mixin的输出将在(css)中显示(意外).所以在上面的答案中没有使用mixins.less的参考确实会给很多不需要的类