数字大于的类的CSS规则

我的样式表看起来像这样：

.thing-1 { background-image: url('top.png'); }
.thing-2 { background-image: url('top.png'); }
.thing-3 { background-image: url('top.png'); }
/* etc... */

其次是：

.thing-20 { background-image: url('bottom.png'); }
.thing-21 { background-image: url('bottom.png'); }
.thing-22 { background-image: url('bottom.png'); }
/* etc... */

我正在寻找一种方法来简化我的样式表与LESS或类似的东西.这是我想做的事情：

.thing-[i < 15] { background-image: url('top.png'); }
.thing-[i >= 15] { background-image: url('bottom.png'); }

有没有办法可以用LESS做这样的事情？如果不是LESS,也许是SASS？

当你要求LESS和Sass时,这里有一些解决方案.你可以通过循环遍历值来实现它 – 但Sass在这个领域有点强大,因为它有内置的控制指令,如@ for,@ if,@ while和@each.当然有多种方法可以实现这一点,但这是第一个想到的方法：

减：

.bg (@i) when (@i < 15) { background-image: url('top.png'); }
.bg (@i) when (@i >= 15) { background-image: url('bottom.png'); }

.things (@max, @i: 1) when (@i < @max) {
  .thing-@{i} { .bg (@i); }
  .things (@max, (@i + 1));
}

.things(50);

和SCSS：

@function bg($i) {
  @if $i < 15 { @return 'top.png' }
  @else { @return 'bottom.png' }
}

@for $i from 1 through 50 {
  .thing-#{$i} { background-image: url(bg($i)); }
}

在哪里可以获得准确的输出.

但是,通过以下方式可以实现更干燥的产量：

较少：见 @seven-phases-max’s answer .但是,如果你的项目少于15件,那么总是需要打印出来的东西.除非你添加另一个警卫只在需要时添加.thing-15,如下所示：

.thing(@i) when (@i = 15) {
    .thing-15 {background-image: url('bottom.png')}
}

您可以在 less2css.org 试用Less解决方案

或SCSS：

%bg-top { background-image: url('top.png'); }
%bg-bottom { background-image: url('bottom.png'); }

@for $i from 1 through 50 {
  .thing-#{$i} {
    @if $i < 15 { @extend %bg-top; }
    @else { @extend %bg-bottom; }
  }
}

我认为最后一个是最优雅的解决方案.

DEMO