具有奇怪语法的SCSS for循环可以工作但是会出现语法错误

Question

您好我创建一个for循环来生成类似于bootstrap的网格系统但是使用flexbox的类，我想知道是否有人知道为什么我会收到此错误。

@for $i from 1 through 12 {
    .flex-#{$i} {
        flex: 0 #{$i} 8.333333333333333 * $i + % ;
        padding: 0 $default-spacing;
    }
}

这一切都完美编译我只是在这一行得到语法错误

flex: 0 #{$i} 8.333333333333333 * $i + % ;

也许是它的IDE基础，我正在使用最新版本的webstorm。

有什么想法吗？

谢谢，kieran。

Answer 1

如果你想连接一个字符串必须引用但你得到一个字符串：

<强> SASS

flex: 0 #{$i} 8.333333333333333 * $i + "%"

<强>输出

flex: 0 1 "8.33333%";

在你的情况下， 1％更好地乘以得到一个百分比单位的数字

<强> SASS

@for $i from 1 through 12 {
    .flex-#{$i} {
        flex: 0 #{$i} 8.333333333333333 * $i * 1% ;
        padding: 0 10px;
    }
}

<强>输出

.flex-1 {
  flex: 0 1 8.33333%;
  padding: 0 10px;
}

.flex-2 {
  flex: 0 2 16.66667%;
  padding: 0 10px;
}
 ...