scss for 循环渲染百分比怪异答案

【问题标题】：scss for loop renders percentage wierdscss for 循环渲染百分比怪异
【发布时间】：2014-08-28 16:09:47
【问题描述】：

我正在尝试根据屏幕宽度从水平翻转到垂直的响应式设计，并且我需要在 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 和 floats）？

【问题讨论】：

标签： css ruby sass middleman

【解决方案1】：

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

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

一个例子：http://sassmeister.com/gist/2c6f6b7cd825b16e423a

【讨论】：

【解决方案2】：

您只需将% 符号添加到100 即可使操作生效。

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

【讨论】：