css - SCSS 百分比计算错误

Question

我在 SCSS 中有一个网格系统，它根据 12 列网格计算列的宽度。以前计算是对的，最近编译错了。

对于这两个版本，我都得到了相同的输出。

SCSS:

@for $i from 1 through 11 {
  .c#{$i} {
    width: (100% / 12) * $i;
  }
}

---

@for $i from 1 through 11 {
  .c#{$i} {
    width: 8.3333333333% * $i;
  }
}

编译后的 CSS:

.c1 {
  width: 8.3333333333%; }

.c2 {
  width: 16.6666666666%; }

.c3 {
  width: 24.9999999999%; }

.c4 {
  width: 33.3333333332%; }

.c5 {
  width: 41.6666666665%; }

.c6 {
  width: 49.9999999998%; }

.c7 {
  width: 58.3333333331%; }

.c8 {
  width: 66.6666666664%; }

.c9 {
  width: 74.9999999997%; }

.c10 {
  width: 83.333333333%; }

.c11 {
  width: 91.6666666663%; }

曾经是:

.c1 {
  width: 8.33333%; }

.c2 {
  width: 16.66667%; }

.c3 {
  width: 25%; }

.c4 {
  width: 33.33333%; }

.c5 {
  width: 41.66667%; }

.c6 {
  width: 50%; }

.c7 {
  width: 58.33333%; }

.c8 {
  width: 66.66667%; }

.c9 {
  width: 75%; }

.c10 {
  width: 83.33333%; }

.c11 {
  width: 91.66667%; }

理想情况下，6 列相当于 50%，其余相应。关于如何让它恢复到原来的状态有什么想法吗？

Answer 1

你可以使用，例如:

scss --precision 5 main.scss main.css

将精度设置为您需要的位数。