正确地将 SASS 插值转换为 LESS

Question

无法将代码的 SASS 和平转换为 LESS，它给了我“无法识别的输入”在线 &:@{伪} {

SASS 代码：

@mixin mm_border( $border, $pseudo, $size, $pos1, $pos2 ) {
    &:#{$pseudo} {
        ...
    }
}

更少的代码：

.mm_border( @border, @pseudo, @size, @pos1, @pos2 ) {
    &:@{pseudo} {
    ...
    }
}

我在 &:@{pseudo} {

线上有错误

据我所知，与 SASS 的唯一区别在于 SASS 上的 #{ $var } 是 LESS 上的 @{ var }，那么问题出在哪里？

我的 Less 编译器版本是 1.6.2

Answer 1

问题似乎出在&:@{pseudo} 中的: 上，大概是因为它试图将@{pseudo} 分配给一个变量，但它不能。

以下是克服它的技巧。不是唯一的解决方案（很可能也不是最好的），但这是您可以使用的一种方法。

代码：

.mm_border( @border, @pseudo, @size, @pos1, @pos2 ) {
  @temp: ~":"; 
  &@{temp}@{pseudo} {
        border: @size @border #abc;
    }
}
.mm{
  .mm_border(solid,after,1px,1,2);
}

编译输出：（在 LESS 1.6.0 中，但这应该不是问题）

.mm:after {
  border: 1px solid #aabbcc;
}