數字大於的類的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

翻譯自:https://stackoverflow.com/questions/19736971/css-rule-for-classes-with-number-greater-than