2

我使用 LESS CSS。我的代码看起来像这样。

可重复模式

你看到我的代码中的模式了吗？两者唯一不同的是填充值和类名。

问题

是否有可能在 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;
    }
}

Mixin 建议

    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 回答