编号大于的类的 CSS 规则

Question

我的样式表是这样的:

.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？

Answer 1

当您要求 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)); }
}

您在哪里获得准确的输出。

但更干燥的输出将通过以下方式实现:

LESS:请参阅 @seven-phases-max's answer .但是，如果您只有少于 15 个元素，则总是必须打印出 .thing-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