LESS CSS:重新生成.@ {name}类作为mixin

Question

我正在使用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) {
    #genSomething(something, somethingParam2, ...);
    #genSomething(somethingElse, somethingElseParam2, ...);
    #genStuff(stuff, 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;
}

Answer 1

不幸.选择器插值只是字符串插值,然后将字符串打印到css中,因此在较少的运行中不会生成类对象.

所以你可以设计一个发电机/混合,包括你的操作:

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

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

Answer 2

更新1.7+(按预期工作)

在.@{name}作为原来的问题曾渴望语法现在只是工作.

实际使用动态类名称的工作量少于1.4+

我在处理另一个问题时想出了一个解决方法,所以我将它作为第二个答案发布,因为它与我之前的答案完全不同.

这个解决方案需要几个步骤(因此不像LESS中的最终修复那么方便),但是会给出能够使用动态生成的类名的实际功能.

第一:定义动态类

这和你的计划一样.

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

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

第二步:将该文件编译为CSS

所以,让我们说你编译dynamicClasses.less成你的dynamicClasses.css.这会导致动态类名称"解析"为实际的类.

第三步:将CSS作为LESS导入到使用动态类名的^第二个 LESS文件中

使用类型转换的@import,我们这样做:

@import (less) dynamicClasses.css;

这将在dynamicClasses.css文件中获取这些已解析的类名,并将它们作为LESS导入,这使得所有类名现在都可用作mixins.所以你可以按照自己的意愿去做:

.someClass {
    .mtStandard; // will work
    // more stuff
}