Recent Memos
Dart Sass 的除法
Published:有这样一个样式:
@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));
用除法各种问题,咱还是直接用乘法曲线救国吧,叠加一个精确位数的四舍五入方法,结果很完美。
Recent Posts
一个表格组件
Published:Eiinu 的博客 3.0
Published:2019-2024,新的开始
ESLint Flat Config 迁移过程
Published:尝试迁移到 ESLint Flat Config 的过程。
一个前端开发的 Mac 新机配置流程
Published:记录一下新电脑的配置过程。