2

私はLESS CSSを使用しています。私のコードは次のようになります。

繰り返し可能なパターン

私のコードにパターンが見えますか? 2 つの違いは、パディング値とクラス名だけです。

質問

LESS CSSで、このようなブロックの関数/ミックスインを多くの異なる要素で作成することは可能ですか?

少ないCSS

&.pad-10 > [class*='cols-'] {
    background: #ccc;
    padding: 10px;

    &:first-child {
        padding-left: 0;
    }

    &:last-child {
        padding-right: 0;
    }
}

&.pad-20 > [class*='cols-'] {
    background: #ccc;
    padding: 20px;

    &:first-child {
        padding-left: 0;
    }

    &:last-child {
        padding-right: 0;
    }
}

ミックスインの提案

    do_padding( $value ) {
        &.pad-@value > [class*='cols-'] {
            background: #ccc;
            padding: @valuepx;

        &:first-child {
            padding-left: 0;
        }

        &:last-child {
            padding-right: 0;
        }
    }

    do_padding( 10 );
    do_padding( 20 );

私の正確な問題は、LESS CSS を使用しない他の方法で解決できることを知っていますが、時々この問題が発生します。

4

1 に答える 1

3

はい、LESS で適切なカウントおよびループ構造をセットアップする必要があるだけです。方法は次のとおりです。

以下

.do_padding(@startValue, @increment) {

  .loop(@value) when (@value > 0) {
    //set top amount
    &.pad-@{value} > [class*='cols-'] {
      background: #ccc;
      padding: @value * 1px;

      &:first-child {
        padding-left: 0;
      }

      &:last-child {
        padding-right: 0;
      }
    }
    // next iteration
    .loop(@value - @increment);
  }

  // end the loop when index is 0 or less
  .loop(@value) when not (@value > 0) {}

  //start the loop
  .loop(@startValue);
}

これを使って

.myClass {
   .do_padding(30, 10);
}

CSS出力

.myClass.pad-30 > [class*='cols-'] {
  background: #ccc;
  padding: 30px;
}
.myClass.pad-30 > [class*='cols-']:first-child {
  padding-left: 0;
}
.myClass.pad-30 > [class*='cols-']:last-child {
  padding-right: 0;
}
.myClass.pad-20 > [class*='cols-'] {
  background: #ccc;
  padding: 20px;
}
.myClass.pad-20 > [class*='cols-']:first-child {
  padding-left: 0;
}
.myClass.pad-20 > [class*='cols-']:last-child {
  padding-right: 0;
}
.myClass.pad-10 > [class*='cols-'] {
  background: #ccc;
  padding: 10px;
}
.myClass.pad-10 > [class*='cols-']:first-child {
  padding-left: 0;
}
.myClass.pad-10 > [class*='cols-']:last-child {
  padding-right: 0;
}
于 2013-02-22T15:50:29.980 に答える