有这样一个样式:
@for $i from 1 through 24 {
.offset-#{$i} {
width: calc((100 / 24) * #{$i} * 1%);
}
}
编译结果中的第一个样式是:width: calc(4.1666666667 * 1 * 1%);
。
因为目标环境(React Native) 并不支持 calc
,所以需要做改造。
第一个方案:width: percentage($i / 24);
它的编译结果中第一个样式是 width: 4.1666666667%;
,满足要求,不过编译过程会报警告,原因见:breaking-changes/slash-div。这样做很好,理由也很让我信服,所以试试它的替代方案。
第二个方案:width: percentage(math.div($i, 24))
math 是 sass 内置的一个模块,需要通过 @use 'sass:math'
的方式声明后才可以使用,但是 @use
又有用法上的限制,比如不能在任何已有样式规则之后使用,这就导致我没办法做完美的替换。由于样式文件结构和引用的关系,我没找到合适的声明位置。
第三个方案:width: percentage(round($i * 0.04166666666, 0.000000001));
用除法各种问题,咱还是直接用乘法曲线救国吧,叠加一个精确位数的四舍五入方法,结果很完美。