3

多くのマージン/パディング ルールを構築するために、より少ない mixin を作成したいと考えています。高さ、幅、高さパーセント、幅パーセントの正しい mixin を作成できました。例えば、

.widthX (@px) when (@px > 0) and (@px =< 30) {
    .width(@px);
    .widthX(@px - 1);
}

.widthX (@px) when (@px >= (30 + 5)) {
    .width(@px);
    .widthX(@px - 5);
}

.width (@px) { (~".w@{px}") { width: ~"@{px}px"; } }

これにより、明示的な幅または一連の幅クラスを作成できます。次の例では、幅 1 ～ 30 の CSS クラスを 1 刻みで作成し、次に 30 ～ 1215 の幅を 5 刻みで作成します。

.widthX (1215);

CSS では、適切に作成されます。

.w1 { width: 1px; }
.w2 { width: 2px; }
// 3-29 ommitted
.w30 { width: 30px; }
.w35 { width: 35px; }
.w40 { width: 40px; }
.w45 { width: 45px; }
// etc

マージンとパディングに加えて、各サイドをパラメーターとして追加できるようにするための同様の mixin を作成できるようにしたいのですが、

.marginX (@px,@side,@abbr) when (@px > 0) {
    .margin(@px,@side,@abbr);
    .marginX(@px - 1,@side,@abbr);
}

.margin (@px,@side,@abbr) { (~".w@{abbr}@{px}") { ~"width-${side}": ~"@{px}px"; } }

そしてそれを次のように呼び出します：

.marginX(100,"top","t");

1-100px の margin-top クラスを作成します。ただし、構文エラーが発生し続けます

{ ~"width-${side}": ~"@{px}px"; } }

私は多くのバリエーションを試しましたが、それらはすべて失敗し続けています。方向ごとに複数のミックスインを作成することはできますが、実際には作成したくありません。誰かが私の問題を解決する提案を提供できることを願っています。

私はこの同様の投稿を見つけました:少ない動的 css プロパティ

4

1 に答える 1

3

LESS は現在、動的 CSS プロパティをサポートしていません。この動的プロパティのサポートの欠如は、 LESS に対する SASS の利点であると主張する批判の 1 つのポイントです。この機能を追加する特定のライブラリ (例: less.js ) にはプル リクエストが存在します。

そうしないと、やりたくないこと、つまり次のことをするのにかなり行き詰まります。

.margin (@px,@side,@abbr) when (@side = left) {
  (~".m@{abbr}@{px}") { margin-left: ~"@{px}px"; }
}
.margin (@px,@side,@abbr) when (@side = right) { 
  (~".m@{abbr}@{px}") { margin-right: ~"@{px}px"; }
}
于 2012-08-17T20:53:55.880 に答える