css - 少ない-@変数を（値ではなく）プロパティに挿入する方法

Question

less.jsでは、問題なく値を変数に置き換えることができます。

@gutter: 20px;
margin-left:e(%("-%d"), @gutter);

プロパティを変数に置き換えようとすると、エラーが発生します。Lessで次のことをどのように実行しますか？

@gutter: 20px;
@direction: left;
e(%("margin-%d"), @direction):e(%("-%d"), @gutter);

Answer 1

解決策と調査を提供してくれた Alvivi に感謝します (その報酬を受け取ります)。これは .blah() 疑似コードを見る代わりに設定する実際の方法であるため、実際の回答として以下を追加することにしました..

これを設定するための実際の戦略は次のとおりです。

@gutter: 20px;
@dir: left;
@dirOp: right;

次に、次のようにマージンとパディングを強化するためのミックスインを作成します。

.margin(left, @dist:@gutter) {
    margin-left:@dist;
}
.margin(right, @dist:@gutter) {
    margin-right:@dist;
}
.padding(left, @dist:@gutter) {
    padding-left:@dist;
}
.padding(right, @dist:@gutter) {
    padding-right:@dist;
}
.lr(left, @dist: 0) {
    left: @dist;
}
.lr(right, @dist: 0) {
    right: @dist;
}

..その後、あなたはただすることができます

#selector {
    .margin(@dir);
} 

また

#selector {
    .margin(@dirOp, 10px);
}

すべて一緒に:

#selector {
    .margin(@dir);
    .margin(@dirOp, 50px);
    .padding(@dir, 10px);
    .padding(@dirOp);
    float:@dir;
    text-align:@dirOp;
    position:absolute;
    .lr(@dir);
}

LESS で簡単に LTR/RTL を実行できます。ウット！

Answer 2

ドキュメントに記載されているように、エスケープはCSS値（プロパティではない）を作成するために使用されます。

ここにいくつかの回避策についての議論があります。1つは、パラメトリックミックスインを使用することです。例えば：

.g ()       { /* Common properties */ }
.g (right)  { margin-right: e(...) } 
.g (left)   { margin-left: e(...) }