DEMO

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时，这里有一些解决方案。您可以通过循环遍历值来实现它 - 但Sass在此字段中更强一些，因为它具有内置控制指令，如@for，@if，@while和{{1 }}。当然有多种方法可以实现这一点，但这是第一个想到的方法：

<强> LESS：

@each

和 SCSS：

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

您可以获得确切的输出。

但是可以通过以下方式获得更多干输出：

LESS：请参阅@seven-phases-max's answer。但是，如果您的项目少于15件，则还有必须打印@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)); } }的问题。除非您添加另一个仅在需要时添加.thing-15的警卫：

.thing-15

您可以在less2css.org

上试用Less解决方案

或 SCSS：

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

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

DEMO

Answer 2

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

更新：使解决方案完全通用，以便在thing-#类的任何一侧允许额外的课程。

这与你正在处理的数字相当实用。基本上该技术类似于what I answered for this question，但在您的情况下，代码如下（here is a tweaked example just using background color）：

[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 can be reduced further to this：

[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');
}

实际限制

如果需要非常大的断点，这将变得非常麻烦，因为需要进行更多的过滤。但仍然是some larger levels can be achieved for breaking as my original answer for the other question demonstrated，并且在那时，或许可以使用LESS或SCSS以某种方式进行断点指向可能，同时仍然保持输出CSS低。

Answer 3

是的，您可以在LESS中执行此操作。然而，代码有点可怕（基本上它需要你学习一些高级的LESS概念）所以如果你的用例很简单，我想你更愿意手动编写这些东西（正如@Ashkan所建议的那样）。 / p>

LESS代码：

.thing-1  {background-image: url('top.png')}
.thing-15 {background-image: url('bottom.png')}

.thing(@i) when (@i < 15) {
    .thing-@{i} {&:extend(.thing-1);}
}
.thing(@i) when (@i > 15) {
    .thing-@{i} {&:extend(.thing-15);}
}

.generate-things(@i) when (@i > 1) {
    .generate-things((@i - 1));
    .thing(@i);
}

.generate-things(30);

Answer 4

你可以做任何一件事

.thing-1,.thing-2,.thing-3,... { background-image: url('top.png'); }
.thing-20,.thing-21,.thing-22,... { background-image: url('bottom.png'); }

你可以为你的元素使用多个类：

.top { background-image: url('top.png'); }
.bottom { background-image: url('bottom.png'); }
.thing-1 { /*only thing-1 related css code*/}
.thing-2 { /*only thing-2 related css code*/}

并使用它：

<div class="top thing-1"></div>
<div class="bottom thing-1"></div>

数字大于的类的CSS规则

4 个答案:

DEMO

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

您可以进一步减少CSS

实际限制