3

プロジェクトの境界線に Less mixin を使用したいのですが、すべてではなく、境界線のさまざまな側面を使用する必要があることがよくあります。

私は簡単なミックスインを書きました：

.border-all (@border; @border-type; @border-color) {
  border-top: @border @border-type @border-color;
  border-right: @border @border-type @border-color;
  border-bottom: @border @border-type @border-color;
  border-left: @border @border-type @border-color;
}

border-topたとえば、 andのみに引数を渡すことは可能border-bottomですか?

そう：

.class {
  .border-all (3px; double; @border-color);
}

次のように出力されます:

.class {
  border-top: 3px double #333;
  border-bottom: 3px double #333;
}

mixin で異なる CSS プロパティにパラメータを渡すことを無視できますか?

4

2 に答える 2

2

そのままでは、特定の CSS プロパティにのみパラメーターを送信するように現在の mixin を変更することはできません。ただし、ミックスインを次のスニペットのように変更して、側面を引数として渡すことができます。

.border-all (@border; @border-type; @border-color; @sides...) {
    & when not (@sides = all){ /* if border is not needed on all sides */
        .border-side(@index) when (@index > 0){
            @side: extract(@sides, @index); /* extract the side specified for each iteration */
            border-@{side}: @border @border-type @border-color; /* create property */
            .border-side(@index - 1);
        }
        .border-side(length(@sides)); /* loop as many times as the no. of sides provided */
    }
    & when (@sides = all){ /* if border is needed for all sides */
        border: @border @border-type @border-color; /* combined because there is no need for 4 separate properties. */
    }
}

.demo{
    .border-all(1px; solid; black; top, right);
}
.demo2{
    .border-all(1px; solid; black; all);
}

必要な側面をミックスインの最後の引数として渡すだけで、対応するプロパティのみが出力 CSS で生成されます。

于 2015-06-19T08:49:01.187 に答える
2

まず最初に、なぜその mixin が必要なのかを尋ねます。だけよりもどのように優れていborder: 3px double @border-color;ますか？

同じように、かなり肥大化して紛らわしい mixin の条件付きロジックを作成する代わりに、一時変数に固執したいと思います。

.class {
   @border: 3px double @border-color;
    border-top: @border;
    border-bottom: @border;
}

はい、1 行ではなく 3 行のコードですが、メンテナンスがより簡単になることは間違いありません。

---

いずれにせよ、そのような mixin を使用する必要がある場合は、おそらく次のように単純化します。

// usage:

.c1 {
    .border(top right, 1px solid black);
}

.c2 {
    .border(1px solid black);
}

// impl:

.border(@sides, @value) {
    .side(length(@sides));
    .side(@i) when (@i > 0) {
        @side: extract(@sides, @i);
        border-@{side}: @value;
        .side(@i - 1);
    }
}

.border(@value) {
    border: @value;
}

この場合、冗長なコンマやセミコロンをすべて使用しても意味がありません。

于 2015-06-19T10:16:14.570 に答える