2

我习惯于用 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 中的选择器保持通用（未指定）？

4

1 回答 1

1

LESS 1.6+ 的更新

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

较少的

.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 中做动态属性名称（无论是前缀还是完整的属性名称，如您所愿），尽管有关于它的讨论。

我推荐一个带有嵌套的、受保护的 mixin 的通用 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;
}
于 2013-03-19T23:27:47.743 回答