SCSS中用%声明CSS样式遇问题，px正常%异常求助

问题原因 #

CSS类名的标识符规则里，%属于特殊字符，不能直接作为类名的一部分使用（不像px是合法字符），所以直接写.w-#{$i}%会导致SCSS解析报错。

修正方案 #

要生成h-[2%]这类格式的类名，需要把百分比符号用方括号包裹，同时对%进行转义，这样既符合合法类名规则，也能匹配你想要的命名格式。以下是修正后的SCSS代码：

/* Pixels */
@for $i from 1 through 100 {
    .w-#{$i}px {
        width: #{$i}px;
    }
}

/* Percent */
@for $i from 1 through 100 {
    .w-[\#{$i}\%] {
        width: #{$i}%;
    }
}

/* Pixels */
@for $i from 1 through 100 {
    .h-#{$i}px {
        height: #{$i}px;
    }
}

/* Percent */
@for $i from 1 through 100 {
    .h-[\#{$i}\%] {
        height: #{$i}%;
    }
}

这段代码会生成类似.h-[2%]、.w-[50%]这样的合法类名，对应的样式也能正常生效。如果不需要方括号，也可以直接转义%写成.w-#{$i}\%，但方括号的写法更直观，也和你想要的命名格式完全匹配。

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