减去CSS -函数中的不同元素

Question

我用的CSS较少。我的代码看起来是这样的。

可重复模式

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

问题

在较少的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 );

我知道，我的确切问题可以通过其他方式解决，而不需要更少的CSS，但我有时也会遇到这个问题。

Answer 1

是的，你只需要建立一个正确的计数和循环结构。下面是操作步骤：

减

.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);
}

使用it

.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;
}