CSS变量：数值与字符串的灵活运用
在CSS样式设计中，尤其是在动态样式调整时，经常需要处理CSS变量的数值和字符串转换。例如，构建一个圆形进度条，就需要将CSS变量的值同时用于计算旋转角度（数值）和显示百分比（字符串）。本文将探讨一种优雅的解决方案，避免了显式类型转换的复杂性。
问题：数值与字符串的转换难题
考虑以下代码片段，它试图使用CSS变量--progress来控制圆形进度条：
立即学习“前端免费学习笔记（深入）”；
.progress-radial {
--progress: 25; /* 进度值 */
}
.progress-radial:before {
transform: rotate(calc(var(--progress)*3.6deg)) translate(0, -72.5px); /* 使用数值计算旋转角度 */
}
.progress-radial b:after {
content: var(--progress)"%"; /* 试图直接使用变量显示百分比，但会出错 */
}
这段代码中，var(--progress)既不是纯数值，也不是纯字符串，导致直接与“%”拼接显示百分比失败。
解决方案：巧用CSS计数器
为了优雅地解决这个问题，我们可以利用CSS的counter-reset和counter()功能。改进后的代码如下：
.progress-radial {
--progress: 25;
}
.progress-radial:before {
transform: rotate(calc(var(--progress)*3.6deg)) translate(0, -72.5px);
}
.progress-radial b:after {
counter-reset: showprogress var(--progress); /* 创建计数器，初始值为变量值 */
content: counter(showprogress)"%"; /* 将计数器值作为字符串输出 */
}
相应的HTML结构：
展示进度值：
通过counter-reset: showprogress var(--progress);，我们创建了一个名为showprogress的计数器，并将其初始值设置为--progress变量的值。然后，content: counter(showprogress)"%";使用counter()函数将计数器的值转换为字符串，并与百分号连接，从而实现了百分比的正确显示。
这种方法简洁高效，避免了复杂的类型转换，同时保持了代码的可读性和可维护性。 它充分利用了CSS本身的功能，提供了一种更具语义化的解决方案。
