使用SCSS if else语句编译错误

Question

我在scss中设置了一个条件，但当我编译时，结果无法出现在css文件中，我希望任何人都能帮助我解决我的问题，我把代码放在下面：

$color-sp: color-sp;
$width: 100%;
@for $i from 1 through 2 {
@if $color-sp == 1 {
.#{$color-sp}-#{$i} {
width: $width / 1;
}
} @else if $color-sp == 2 {
.#{$color-sp}-#{$i} {
width: $width / 2;
}
}
}   

Answer 1

我认为您必须将if condition放在$I上，而不是$color sp。检查下面的代码，它将生成两个类。试穿一下https://www.sassmeister.com/

$color-sp: color-sp;
$width: 100%;
@for $i from 1 through 2 {
@if $i == 1 {
.#{$color-sp}-#{$i} {
width: $width / 1;
}
} @else if $i == 2 {
.#{$color-sp}-#{$i} {
width: $width / 2;
}
}
}  

创建类的优化代码如下：

$color-sp: color-sp;
$width: 100%;
@for $i from 1 through 2 {
.#{$color-sp}-#{$i} {
width: $width / $i;
}
}