从CSS到SCSS的for循环

Question

I am new to SCSS and trying to write a CSS code below to SCSS, I have got the first part, but I can't find any help anywhere to find out how to get the rest done, can anyone please help?

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

so far this is what I have which is for the width but can't figure out the rest, any help would be appreciated thank you

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

Answer 1

You can use a simple if-else for the paddings and color:

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

Which will give you the CSS you're after:

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