巧妙结合数值型CSS变量和百分号字符串实现进度条

在CSS中实现进度条时，我们经常需要将数值型变量与百分号字符串结合使用。以下是几种优雅的实现方法：

方法1：使用calc()函数

:root {
  --progress-value: 75; /* 数值型变量 */
}

.progress-bar {
  width: calc(var(--progress-value) * 1%);
}

方法2：使用CSS自定义属性字符串拼接

:root {
  --progress-value: 75;
  --progress-percent: var(--progress-value) * 1%;
}

.progress-bar {
  width: calc(var(--progress-percent));
}

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

<div class="progress-bar" data-progress="75"></div>

.progress-bar {
  width: attr(data-progress %);
}

注意：attr()函数对CSS属性的支持有限，可能不是所有浏览器都支持这种用法。

方法4：使用SCSS/SASS预处理

$progress-value: 75;

.progress-bar {
  width: #{$progress-value}#{"%"};
}

方法5：使用JavaScript动态设置

document.documentElement.style.setProperty('--progress-percent', progressValue + '%');

完整进度条示例

<div class="progress-container">
  <div class="progress-bar" style="--progress: 65;"></div>
</div>

.progress-container {
  width: 100%;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: calc(var(--progress) * 1%);
  background-color: #4CAF50;
  transition: width 0.3s ease;
}

注意事项

1. 使用calc()时要注意运算符两边的空格
2. 考虑添加CSS变量回退值：width: calc(var(--progress, 0) * 1%);
3. 对于动画效果，直接修改数值变量比修改字符串更高效

这些方法都能很好地解决数值型CSS变量与百分号字符串结合的问题，选择哪种取决于你的具体需求和项目环境。