0

複数の数値を受け入れ、レム測定単位とピクセルフォールバックを使用してcss値/プロパティのペアを吐き出すマージン用のLESSミックスインを作成しました。

これが私が助けを必要としているものです：

  1. ミックスインが「auto」や「inherit」などの有効な文字列ベースのプロパティを受け入れることができるようにしたい
  2. 必要な引数の量だけを宣言できるようにしたいと思います。例えば。マージン左だけが必要な場合は、のようなものを書くだけで済み.margin(nope,nope,nope,1);ます。

これが私がこれまでに持っているものです：

.margin(@sizeValueTop: auto, @sizeValueRight: 0, @sizeValueBottom: 0, @sizeValueLeft: 0) {
  @pxValueTop: (@sizeValueTop * 16);
  @remValueTop: (@sizeValueTop);
  @pxValueRight: (@sizeValueRight * 16);
  @remValueRight: (@sizeValueRight);
  @pxValueBottom: (@sizeValueBottom * 16);
  @remValueBottom: (@sizeValueBottom);
  @pxValueLeft: (@sizeValueLeft * 16);
  @remValueLeft: (@sizeValueLeft);
  margin-top: ~"@{pxValueTop}px"; 
  margin-top: ~"@{remValueTop}rem";
  margin-right: ~"@{pxValueRight}px"; 
  margin-right: ~"@{remValueRight}rem";
  margin-bottom: ~"@{pxValueBottom}px"; 
  margin-bottom: ~"@{remValueBottom}rem";
  margin-left: ~"@{pxValueLeft}px"; 
  margin-left: ~"@{remValueLeft}rem";
}

body{
  .margin(1,1,1,1);
}

どんな助けでも素晴らしいでしょう。

4

1 に答える 1

1

1）それがの数学をするのを防ぎたいauto * 16ですか？私が見ていなかったときにif/else制御ステートメントを挿入しない限り、不可能です。ガードは、引数の型を確認できる唯一の方法です。これは、すべてのベースをカバーするために同じミックスインの複数の宣言を意味します。ただし、他のミックスインを呼び出すミックスインを持つことができます...

2）また不可能です。デフォルトとして残す可能性が最も高い引数を最後に配置します。あなたの例では、デフォルト値が引数の3/4にあるため、入力nopeする利点はありません。00

于 2012-10-03T11:59:24.563 に答える