1

渡される側（上、右、下、左、またはすべて）に基づいてマージンを作成するためのいくつかの少ないものがあります：

   .margin(@px,@side) when (@side = top) {
      (){ margin-top: ~"@{px}px"; }
   }
   .margin(@px,@side) when (@side = right) {
      (){ margin-right: ~"@{px}px"; }
   }
   .margin(@px,@side) when (@side = bottom) {
      (){ margin-bottom: ~"@{px}px"; }
   }
   .margin(@px,@side) when (@side = left) {
      (){ margin-left: ~"@{px}px"; }
    }
   .margin(@px,@side) when (@side = all) {
      (){ margin-top: ~"@{px}px";
      margin-right: ~"@{px}px";
      margin-bottom: ~"@{px}px";
      margin-left: ~"@{px}px"; }
    }

私の質問は、私がこのようなIDを持っている場合：

#testfeature {
.margin(10px,l);
.margin(10px,r);
}

次に、LESSは次のようにコンパイルします。

#testfeature {
margin-left:10px;
}

#testfeature {
margin-right:10px;
}

このようにコンパイルするにはどうすればよいですか？

#testfeature {
margin-left:10px;
margin-right:10px;
}
4

2 に答える 2

2

() { ... }すべての mixin スタイルをラップしている不要な を取り除きます。それらはセレクターを奇妙に解釈させ、すべてを 1 つの選択の下に結合するのではなく、それらを異なる選択に分割します。

.margin(@px,@side) when (@side = top) {
    margin-top: ~"@{px}px";
}
.margin(@px,@side) when (@side = right) {
    margin-right: ~"@{px}px";
}
.margin(@px,@side) when (@side = bottom) {
    margin-bottom: ~"@{px}px";
}
.margin(@px,@side) when (@side = left) {
    margin-left: ~"@{px}px";
}
.margin(@px,@side) when (@side = all) {
    margin-top: ~"@{px}px";
    margin-right: ~"@{px}px";
    margin-bottom: ~"@{px}px";
    margin-left: ~"@{px}px";
}

~"@{px}px"おそらく、単に を優先して をドロップすることもできます@px。また、最後の mixin はおそらく次のようにする必要があります。

.margin(@px, @side) when (@side = all) {
    margin: @px;
}
于 2013-02-15T21:30:06.240 に答える
0

それらを「グループ化」するには、ネストされたグループ化された mixin を作成する必要があります。以下は、グループ化されたミックスイン関数で、マージン設定のために「合理化」されています。

  1. 1 ～ 8 個のパラメーターを使用できます。position常にthenのペアになりvalueます (以下に示す場合を除きます。任意の順序の位置とautoorの値を受け入れることができますinherit)。
  2. 単一の「位置」を渡すと、0pxその位置にマージンが設定されます。
  3. 非単位数のデフォルトpxは に設定されますが、明示的に設定された単位は渡されたままになります。
  4. 数値である単一のパラメーターを渡すと、すべてのマージンがその数値に等しく設定されます。

LESS ミックスイン

.setMargins(@s1: ~'', @v1: 0, @s2: ~'', @v2: 0, @s3: ~'', @v3: 0, @s4: ~'', @v4: 0) {

   .setPos(top, @T) {
        .setNum() when (isnumber(@T)) {
           margin-top: @T * 1px;
        }
        .setNum() when not (isnumber(@T)){
           margin-top: @T;
        }
        .setNum();
    }
   .setPos(right, @R) {
        .setNum() when (isnumber(@R)) {
           margin-right: @R * 1px;
        }
        .setNum() when not (isnumber(@R)) {
           margin-right: @R;
        }
        .setNum();
    }
   .setPos(bottom, @B) {
        .setNum() when (isnumber(@B)) {
           margin-bottom: @B * 1px;
        }
        .setNum() when not(isnumber(@B)) {
           margin-bottom: @B;
        }
        .setNum();
    }
   .setPos(left, @L) {
        .setNum() when (isnumber(@L)) {
           margin-left: @L * 1px;
        }
        .setNum() when not (isnumber(@L)) {
           margin-left: @L;
        }
        .setNum();
    }
   //allows all to be called with one number or value
   .setPos(@A, 0) when (isnumber(@A)) {
           margin: @A * 1px;
   }
   .setPos(auto, 0) {
           margin: auto;
   }
   .setPos(inherit, 0) {
           margin: inherit;
   }
   //default null if no valid side given
   .setPos(@other, 0) {}
   //call all possible positions
   .setPos(@s1, @v1);
   .setPos(@s2, @v2);
   .setPos(@s3, @v3);
   .setPos(@s4, @v4);
}

例

  1. .setMargins(right);生産するmargin-right: 0px;
  2. .setMargins(right, 15);生産するmargin-right: 15px;
  3. .setMargins(left, 10em);生産するmargin-left: 10em;
  4. .setMargins(top, 12, right, 10);生成:margin-top: 12px; margin-right: 10px;
  5. .setMargins(25);生成:margin: 25px;
  6. .setMargins(auto);生成:margin: auto;

したがって、セレクターで使用します。

以下

#testfeature {
   .setMargins(left, 10, right, 10);
}

CSS出力

#testfeature {
  margin-left: 10px;
  margin-right: 10px;
}
于 2013-02-16T22:09:06.797 に答える