数字大于的类的CSS规则 [英] CSS rule for classes with number greater than

问题描述

我的样式表如下所示：

  .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 。当然有多种方法可以实现这一点，但是这是第一个被想到的：

LESS：

  .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从1到50 {
 .thing  - ＃{$ i} {background-image：url（bg（$ i））; } 
} 
  

但干燥输出将通过以下方式实现：

LESS： a href =http://stackoverflow.com/questions/19736971/css-rule-for-classes-with-number-greater-than/19737428#19737428> @ seven-phases-max的回答。但是，如果你只有不到15个项目，总是有打印输出 .thing-15 的问题。除非您添加另一个警卫，只有在需要时添加 .thing-15 ：

  .thing（@i）when（@i = 15）{
 .thing-15 {background-image：url（'bottom.png'）} 
} 
  

您可以尝试在 less2css.org

或 SCSS：

 ％bg-top {background-image：url（'top.png'）; } 
％bg-bottom {background-image：url（'bottom.png'）; } 
 
 @for $ i从1到50 {
 .thing  - ＃{$ i} {
 @if $ i< 15 {@extend％bg-top; } 
 @else {@extend％bg-bottom; } 
} 
} 
  

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

DEMO

My stylesheet looks like this:

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

Followed by this:

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

I am looking for a way to simplify my stylesheet with LESS or something similar. Here's what I'd like to do:

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

Is there a way I can do something like this with LESS? If not LESS, maybe SASS?

解决方案

As you are asking for LESS and Sass, here are some solutions. You can achieve it in both with looping through values - but Sass is a bit stronger in this field as it has built-in control directives like @for, @if, @while and @each. There are of course multiple ways of implementing this but this were the first that came to mind:

LESS:

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

and 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)); }
}

where you achieve your exact output.

But a more dry output would be achieved with:

LESS: see @seven-phases-max's answer. However, there is the problem of always having to print out .thing-15 also if you only have less than 15 items. Unless you add another guard that adds .thing-15 only when needed like so:

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

you can try out the Less solutions at less2css.org

or 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; }
  }
}

The last one in my opinion is the most elegant solution.

DEMO

这篇关于数字大于的类的CSS规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！