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コードを記述するためのより良い方法はありますか？

4

1 に答える 1

1

LESS1.6以降のアップデート

これは、次のように、1.6アップデートでほぼ直接マッピングされています。

以下

.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で動的プロパティ名を実行する実際の方法はありません（プレフィックスを付ける場合でも、必要に応じて完全なプロパティ名を使用する場合でも） 。これについては議論があります。

ロジックには、ネストされたガード付きミックスインを使用した汎用ミックスインをお勧めします。これでも特定のプロパティを選択できますが、設定するにはさらに明示的なコードが必要です。何かのようなもの：

.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 に答える