在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

为什么你会用classname本身手动定义每个可能的填充变体？这不是LESS的设计目标，并且对于你给出的背景并没有多大意义。

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

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