Question

我正在尝试制作一个响应式设计，根据屏幕宽度从水平翻转到垂直，我需要在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有{价值为{1}}。

我定位的浏览器处理这个问题。但是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

Answer 2

您只需将%符号添加到100即可使操作正常进行。

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

scss for loop渲染百分比奇怪

2 个答案: