带有for循环的CSS到SCSS

Question

我是SCSS的新手，并试图在下面为SCSS编写一个CSS代码，我已经得到了第一部分，但是我在任何地方都找不到任何帮助来了解如何完成剩下的工作，谁能帮我吗？

.par-1 {
    width: 3px;
    color:#fff;
    padding: 1px 0;
}
.par-2 {
    width: 6px;
    color: #000;
    padding: 0 2px;
}
.par-3 {
    width: 9px;
    color: #fff;
    padding: 3px 0;
}
.par-4 {
    width: 12px;
    color: #000;
    padding: 0 4px;
}
.par-5 {
    width: 15px;
    color: #fff;
    padding: 5px 0;
}
.par-6 {
    width: 18px;
    color: #000;
    padding: 0 6px;
}

到目前为止，这是我所拥有的宽度，但不知道其余的，任何帮助将不胜感激。

$a:1;
@for $a from 1 through 6 {
    .item-#{$a} 
    {width: 3px * $a; }
}

Answer 1

您可以使用一个简单的if- and作为垫子和颜色：

@for $a from 1 through 6 {
  .par-#{$a} {
    width: 3px * $a;
    @if $a % 2 == 0 {
      color: #000;
      padding: 0 #{$a}px;
    } @else {
      color: #fff;
      padding: #{$a}px 0;
    }
  }
}

这会给你你想要的CSS：

.par-1 {
  width: 3px;
  color: #fff;
  padding: 1px 0;
}

.par-2 {
  width: 6px;
  color: #000;
  padding: 0 2px;
}

.par-3 {
  width: 9px;
  color: #fff;
  padding: 3px 0;
}

.par-4 {
  width: 12px;
  color: #000;
  padding: 0 4px;
}

.par-5 {
  width: 15px;
  color: #fff;
  padding: 5px 0;
}

.par-6 {
  width: 18px;
  color: #000;
  padding: 0 6px;
}