将生成的CSS类重用为mixins

Question

我已经为使用Less的应用程序生成了字体加粗功能。问题是我无法在我的Less代码中声明它。而如果我嵌入HTML，则可以正常工作。

这是我正在使用的代码：

减少：

@fontSelectors: 300, 400, 700, 900;
each(@fontSelectors, {
  .font-@{value} { font-weight: @value; }
});

.font-700; // Error 
h1 { .font-700; } // Error 

HTML：

<div class="font-700"></div> <!-- Working -->

我做错了什么？怎么也为其他类参数声明？

有人可以引导我吗？

谢谢

Answer 1

检查此

.fontgenerator(@value){
   .font-@{value} { font-weight: 1px * @value; }
}

.fontgenerator(300);
.fontgenerator(400);
.fontgenerator(700);
.fontgenerator(900);

您的代码

 @fontSelectors: 300, 400, 700, 900;

each(@fontSelectors, {
  .font-@{value} { font-weight:1px * @value; }
});

具有这样的输出

.font-300 {
  font-weight: 300px;
}
.font-400 {
  font-weight: 400px;
}
.font-700 {
  font-weight: 700px;
}
.font-900 {
  font-weight: 900px;
}

您可以使用它