在 CSS 中进行数据类型转换

前言

以下大部分方法的兼容性并不算高。

<number> → <dimension>

最简单的，通过 calc(5 * 1px) 可以将数字转换为任何<dimension>。

<dimension> → <number>

第一时间想到的便是相对的 calc(5px / 1px)，但这样实际上并不能成功。正确的方法是使用 tan(atan2(5px, 1px))。

<integer> → <string>

::before {
	counter-reset: n 1;
	content: counter(n);
}

注意此处的数字如果是直接指定（包括变量）为一个非整数，那其会被设定为 0。但如果是通过计算得到的，则会被隐式转换为整数（四舍五入）。

而如果需要保留小数部分，可以通过：

::before {
	--n: calc(pi);
	--w: round(down, var(--n));
	counter-reset: w var(--w) f calc((var(--n) - var(--w)) * pow(10, 2));
	content: counter(w) "." counter(f);
}

或者兼容性稍微好一点的：

@property --w {
	syntax: "<integer>";
	inherits: false;
	initial-value: 0;
}
::before {
	--n: calc(78.8);
	--w: calc(var(--n) - 0.5);
	--r: 3;
	counter-reset: w var(--w) f calc((var(--n) - var(--w)) * pow(10, var(--r)) - 0.5 + pow(10, calc(var(--r) * -1)));
	content: counter(w) "." counter(f);
}

<dimension> → <dimension>

@property --d2d {
	syntax: "<length>";
	inherits: false;
	initial-value: 0;
}
::before {
	--d2d: calc(1em);
	counter-reset: n tan(atan2(var(--d2d), 1px));
	content: counter(n);
}

通过这种方式，我们可以方便地查看每个元素的字体大小（px）。

类似地，我们也可以通过 --d2d: calc(100vw); 来查看视口的实时宽度。

但似乎这种方式在与上方的小数显示方法一起使用时会出现问题，具体原因不明。