css - scss for 循环使百分比变得奇怪

Question

我正在尝试制作一个响应式设计，根据屏幕宽度从水平翻转到垂直，并且我需要在 css 中定义的所有宽度百分比，因为我无法使用 JavaScript。

该应用程序基于 Middleman(一个 ruby​​ gem)，我使用 scss 作为 css 处理器/渲染器。

对于 scss 中的此内容:

@for $i from 0 through 100 {
    .width-percentage-#{$i} {
      width : #{percentage($i/100)};
    }
}

它在css中得到这个:

... 
.width-percentage-27 {
    width: 27%
}
.width-percentage-28 {
    width: 28.0%
}
.width-percentage-29 {
    width: 29.0%
}
.width-percentage-30 {
    width: 30%
}
...

.width-percentage-53 {
    width: 53%
}
.width-percentage-54 {
    width: 54%
}
.width-percentage-55 {
    width: 55.0%
}
.width-percentage-56 {
    width: 56.0%
}
.width-percentage-57 {
    width: 57.0%
}
.width-percentage-58 {
    width: 58.0%
}
.width-percentage-59 {
    width: 59%
}
... 

现在请注意问题...对于 28、29、55、56、 57、58 值中有一个 .0。

我的目标浏览器可以很好地处理这个问题。但是 scss 处理器如何在同一循环中呈现不同的值类型(int 和 float)？

Answer 1

确实很奇怪，你可以通过使用 round 或 ceil 来解决这个问题

@for $i from 0 through 100 {
  .width-percentage-#{$i} {
    width : round(percentage($i/100));
  }
}

示例:http://sassmeister.com/gist/2c6f6b7cd825b16e423a