CSS变量：同时作为数字计算和字符串显示

在CSS中，变量（自定义属性）默认是字符串类型，但可以通过一些技巧让它们既能参与数值计算又能作为字符串显示。

解决方案

方法1：使用calc()函数进行数值计算

:root {
  --size: 10; /* 存储为无单位的数字 */
}

.element {
  width: calc(var(--size) * 1px); /* 作为数字计算 */
  content: var(--size); /* 作为字符串显示 */
}

方法2：使用CSS计数器

:root {
  --number: 5;
}

body {
  counter-reset: num var(--number);
}

.element::after {
  content: counter(num); /* 显示为字符串 */
  width: calc(var(--number) * 10px); /* 作为数字计算 */
}

方法3：使用data-*属性和attr()

<div class="element" data-size="10"></div>

.element {
  width: calc(attr(data-size number) * 1px);
}
.element::after {
  content: attr(data-size);
}

注意事项

1. CSS变量本身没有类型，它们的类型取决于使用方式
2. 在calc()中使用时，确保单位一致或进行适当转换
3. attr()函数的number类型支持目前有限（Chrome 95+支持）

最佳实践

:root {
  --size-value: 10; /* 用于计算的值 */
  --size-display: "10"; /* 用于显示的值 */
}

.element {
  width: calc(var(--size-value) * 1px);
  height: calc(var(--size-value) * 1px);
  content: var(--size-display);
}

这种方法虽然需要维护两个变量，但提供了最大的灵活性和浏览器兼容性。