SASS循环内执行if语句的实现问题求助

你的代码无法正常运行是因为相等判断用错了符号：SASS中判断两个值相等需要使用双等号==，而单个等号=是赋值操作，不是比较逻辑。

原代码里的@if ($i = 2)会把变量$i强制赋值为2，而赋值后的结果（数值2）在SASS的条件判断中会被视为true，导致这个@if块在每一次循环都会执行，最终所有h1到h4的颜色都会被覆盖为黄色，这显然不符合你的预期。

修正后的代码 #

把条件判断里的=改成==即可：

@for $i from 1 through 4 {
    h#{$i} {
        color: red;
    }
    @if ($i == 2) {
        h#{$i} {
            color: yellow;
        }
    }
}

更简洁的写法 #

你还可以把条件判断嵌套在选择器的规则内部，避免重复生成相同的选择器：

@for $i from 1 through 4 {
    h#{$i} {
        color: red;
        @if $i == 2 {
            color: yellow;
        }
    }
}

编译后会生成更干净的CSS：

h1 {
  color: red;
}
h2 {
  color: yellow;
}
h3 {
  color: red;
}
h4 {
  color: red;
}

内容的提问来源于stack exchange，提问作者kbl