Css 循环的SCS渲染百分比wierd

我试图做出一个响应性设计，根据屏幕宽度从水平到垂直翻转，我需要css中定义的所有宽度百分比，因为我不能使用JavaScript

该应用程序基于

Middleman

（一块红宝石），我使用

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）

奇怪的是，您可以使用

round

或

ceil

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

---

例如：

您只需将

%

符号添加到100即可使操作正常工作

@for $i from 1 through 100 {
  .width-percentage-#{$i} {
    width : #{100% / $i};
  }
}