数字大于的类的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做这样的事情？如果不是,可能是SASS？

Answer 1

正如你要求LESS和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的答案.但是,.thing-15如果您的项目少于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

Answer 2

在某些条件下不需要预处理器

更新:使解决方案完全通用,以允许在课程的任何一侧额外的课程thing-#.

这与您正在处理的数字相当实用.基本上这个技术类似于我对这个问题的回答,但在你的情况下,代码如下(这是一个仅使用背景颜色的调整示例):

[class*="thing-"] {
    background-image: url('top.png');
}

[class*="thing-1"]:not(.thing-1):not(.thing-10):not(.thing-11):not(.thing-12):not(.thing-13):not(.thing-14),
[class*="thing-2"]:not(.thing-2),
[class*="thing-3"]:not(.thing-3),
[class*="thing-4"]:not(.thing-4),
[class*="thing-5"]:not(.thing-5),
[class*="thing-6"]:not(.thing-6),
[class*="thing-7"]:not(.thing-7),
[class*="thing-8"]:not(.thing-8),
[class*="thing-9"]:not(.thing-9) {
    background-image: url('bottom.png');
}

它在对多个数字进行"常规"选择时使用属性选择器,然后筛选出通用不应用的特定类.

你可以进一步减少CSS

如果你改变你的1-9类具有前述零(thing-01,thing-02等等),那么一般的CSS 可以进一步降低此:

[class*="thing-"] {
    background-image: url('top.png');
}

[class*="thing-"]:not([class*="thing-0"]):not(.thing-10):not(.thing-11):not(.thing-12):not(.thing-13):not(.thing-14) {
    background-image: url('bottom.png');
}

实际限制

如果需要非常大的断点,这将非常麻烦,因为需要进行更多的过滤.但是仍然有一些更大的级别可以实现打破,因为我对其他问题的原始答案已经证明,并且在那时,可能使用LESS或SCSS以某种方式做断点指向可能,同时仍然保持输出CSS低.