如何创建10个CSS类，每个类有10%的暗灰色背景和较少的？

Question

我试图找出创建10个类的正确语法，每个类都具有更深、更深的灰色背景颜色。输出可以是这样的：

.bg-gray-1 {
  background-color: #eee;
}
.bg-gray-2 {
  background-color: #ddd; // for example
}
...
.bg-gray-10 {
  background-color: #222; // for example
}

到目前为止，我已经尝试过这样的方法，但是在颜色的位置打印NaNNaNNaN。

// helper class, will never show up in resulting css
// will be called as long the index is above 0
.loop (@index) when (@index > 0) {

    // create the actual css selector
        // use (~'.@{class}_@{index}') for LESS version < 1.4
    .bg-gray-@{index} {
        background-color: darken(#eee, (@index*10)%);
    }

    // next iteration
    .loop(@index - 1);
}

// end the loop when index is 0
.loop (0) {}

.loop(10);

Answer 1

问题在于百分比被附加到计算数字的方式。这不会将百分比值输出为数值百分比(如10%、20%等)，因此darken()函数返回#NaNNaNNaN作为输出。

.bg-gray-@{index} {
    background-color: darken(#eee, (@index * 10)%);
}

相反，应该将%添加到数字本身，这样可以减少输出值的百分比(而不是字符串或其他东西)。

.bg-gray-@{index} {
    background-color: darken(#eee, (@index * 10%));
}

Answer 2

也许我试过像这样的东西，不久前我用'50度灰色‘的演示看过它。

    <div class="shades">
      <div class="shade">1<span> Shades of Grey</span></div>
      <div class="shade">2<span> Shades of Grey</span></div>
      <div class="shade">3<span> Shades of Grey</span></div>
      <div class="shade">4<span> Shades of Grey</span></div>
      <div class="shade">5<span> Shades of Grey</span></div>
      <div class="shade">6<span> Shades of Grey</span></div>
      <div class="shade">7<span> Shades of Grey</span></div>
      <div class="shade">8<span> Shades of Grey</span></div>
      <div class="shade">9<span> Shades of Grey</span></div>
      <div class="shade">10<span> Shades of Grey</span></div>
</div>

或

HTML (JADE)

- var i = 1
.shades
  while i <= 50
   div.shade= i++
     span  Shades of Grey

法线CSS

.shade {
  color: white;
  padding: 50px;
  text-align: center;
  float: left;
  margin: 5px;
  font-size: 0.8em;
  font-weight: bold;
  width: 10%;
}

.shades div:nth-of-type(1) {
  background-color: #7e7e7e;
}

.shades div:nth-of-type(2) {
  background-color: #7c7c7c;
}

.shades div:nth-of-type(3) {
  background-color: #7a7a7a;
}

.shades div:nth-of-type(4) {
  background-color: #787878;
}

.shades div:nth-of-type(5) {
  background-color: #767676;
}

.shades div:nth-of-type(6) {
  background-color: #747474;
}

.shades div:nth-of-type(7) {
  background-color: #727272;
}

.shades div:nth-of-type(8) {
  background-color: #707070;
}

.shades div:nth-of-type(9) {
  background-color: #6e6e6e;
}

.shades div:nth-of-type(10) {
  background-color: #6c6c6c;
}

或

SASS

.shade
  color: white
  padding: 50px
  text-align: center
  float: left
  margin: 5px
  font-size: 0.8em
  font-weight: bold
  width: 10%

@for $i from 1 through 50
  .shades
    div:nth-of-type(#{$i})
      background-color: darken(grey, 0.8% * $i)

编辑:忘记了来源