計算を

Question

私のグリッドは、異なるブレークポイントごとに異なる側溝があり、私はそのように事前に定義された変数を渡すことによって、動的に私の.rowクラスを生成するのが好きだろう：私は内のいくつかのミックスインを持って次に

@grid-gutter-xs: 10px; 
@grid-gutter-sm: 20px; 
... 

半分にガターサイズを除算することにより行負のマージンを生成一つは：

.grid-row(@class) { 
    .row { 
    margin-right: -(@{grid-gutter-@{class}}/2); 
    margin-left: -(@{grid-gutter-@{class}}/2); 
    } 
} 

後

のように呼ばれています

これはコードの抜粋であり、私はこれを別の方法でやり直して頭痛を逃れることができますが、単にこのように機能しないのか（なぜ）、構文に何か不足しているのか不思議です。

Answer 1

あなたが持っているアイデアは正しいもので、何も問題はありません。このようなケースではmixinの処理量が減ります。しかし、実装は、コードの以下の行でいくつかの問題があります：すべての

margin-right: -(@{grid-gutter-@{class}}/2); 

• まず、あなたが変数と文字列の連結のための文字列grid-gutterと構文で@class変数の値を連結していることは"string-concatenated-with-@{var}"です（引用符に注意してください）。次に、連結された文字列と同じ名前の変数を評価する必要があります。

• しかし、"@{grid-gutter-@{class}}"のように全体を引用符で囲んでも、this answerに記載されている問題のため、数式は機能しません。

• 計算が実行できないため、"@{grid-gutter-@{class}}"/2の出力は20px/2（文字列の連結）のようなものになります。この全体の出力は単なる文字列なので、否定-(...)も失敗し、エラーが発生します（この手順のエラーメッセージは混乱しますが、それは別の問題です）。

これを行うための正しい方法は、以下のようになります。

• 連結し、一時変数にgrid-gutterと店舗との@{class}変数の値。
• テンポラリ変数の値を得るには@@varのようなテンポラリ変数を使用します（@varは評価された文字列と同じ名前の変数の値をフェッチします）。そのような場合、Lessは出力値を数値にし、それに従うべき数学演算をサポートするために必要です。
• この後、無効値を取得するには-(@@margin/2)または-1 * @@margin/2を使用できます。これらのシンタックスのどれにも大きな利点はなく、個人的な好みのものがあります。

コード：

@grid-gutter-xs: 10px; 
@grid-gutter-sm: 20px; 
.grid-row(@class) { 
    .row { 
    @margin: "grid-gutter-@{class}"; 
    margin-right: -1 * @@margin/2; /* or -(@@margin/2) */ 
    margin-left: -1 * @@margin/2; 
    } 
} 
@media (min-width: @screen-sm-min) { 
    .grid-row(sm); 
} 
@media (min-width: @screen-xs-min) { 
    .grid-row(xs); 
}