CSS to SCSS with for循環

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-else對於填充和顏色：

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