Question

我习惯于在SCSS中编码，但对LESS来说却是新手。

我在SCSS中有以下代码，但想知道如何在LESS中编写它。

这是SCSS代码......

@mixin posL($property, $value) {
   {$property}: $value;
}

.box {
   width:200px;
   height:200px;
   background:red;
   position:absolute;
   @include posL(left, 100px);
 }

到目前为止，我在LESS中有类似的东西，但我必须声明选择器......

.posL(@property: 100px, @value: 2px) {
    left: @property;
    -rtl-left: @value;
}

.box {
    width:200px;
    height:200px;
    background:red;
    position:absolute;
   .posL(200px);
 }

有没有更好的方法来编写我的LESS代码，以便mixin中的选择器保持通用（未指定）？

Answer 1

LESS 1.6 +

的更新

现在几乎是the 1.6 update的直接映射，如下所示：

<强> LESS

.posL(@property, @value) {
   @{property}: @value;
}

.box {
   width:200px;
   height:200px;
   background:red;
   position:absolute;
   .posL(left, 100px);
 }

CSS输出

.box {
  width: 200px;
  height: 200px;
  background: red;
  position: absolute;
  left: 100px;
}

原始答案（前1.6）

目前没有真正的方法可以在LESS中执行动态属性名称（无论是前缀还是完整属性名称，如您所愿），there is discussion about it。

我建议使用带有嵌套，保护混合的通用mixin作为逻辑。这仍然允许您选择特定属性，但确实需要一些更明确的代码来设置它。类似的东西：

.posL(@property, @value) {
   .getProp(left) {
      left: @value;
    }
   .getProp(-rtl-left) {
      -rtl-left: @value;
   }
   .getProp(@property);
}

然后使用它与SASS版本的方式非常相似：

.box {
   width:200px;
   height:200px;
   background:red;
   position:absolute;
   .posL(left, 100px);
 }

编译为：

.box {
  width: 200px;
  height: 200px;
  background: red;
  position: absolute;
  left: 100px;
}

如何将SCSS mixin转换成LESS？

1 个答案:

LESS 1.6 +

原始答案（前1.6）