css - 在LESS中为类名连接字符串

Question

我正在将 LESS 转换为 CSS，我想在下面运行 LESS 函数：

.myPL( @val ) {
   .pL @val{
    padding-left:@val;
   }
}

函数调用：

.myPL( 20px );

预期结果：

.pL20px{padding-left:20px}

但实际结果是语法错误。

请帮我在LESS中连接类名中的字符串。

Answer 1

你正在寻找的是所谓的选择器插值......你可以在这里找到它：http: //lesscss.org/#-selector-interpolation

你的 mixin 需要看起来像这样才能工作：

.myPL( @val ) {
  .pL@{val} {
    padding-left: @val;
  }
}

Answer 2

您想要实现的目标在 LESS 中不起作用：

你可以这样做：

.myPL( @val ) {
   padding-left: @val;
}

Answer 3

你到底为什么要手动定义每个可能的填充变体以及类名本身？这不是 LESS 的设计目的，并且对于您给出的上下文并没有多大意义。

mixin 的想法是让它们可重用，但我不明白为什么你会在那个 mixin 的中间调用一个类名。正确使用 LESS mixins，并执行以下操作：

.pl(@val) {
    padding-left: @val;
}