具有奇怪语法的 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。

有什么想法吗？

谢谢，基兰。

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

SCSS for loop with odd syntax works but getting syntax errors