CSS自定义属性能否存储同一选择器中其他CSS属性的值？

嘿，这个需求我之前也碰到过，先直接给你结论：你写的--container-width: width;这种直接引用属性名的方式是行不通的，下面给你详细解释原因和可行的解决方案：

为什么直接引用属性名不行？ #

CSS自定义属性（也就是你说的CSS变量）的赋值规则是：你给它的必须是一个有效的CSS属性值（比如10px、red、calc(100% - 20px)），而不是另一个属性的名称。当你写--container-width: width;时，CSS会把width当作一个普通的字符串值处理，而不是去读取当前元素width属性的实际值——这完全不符合你想要的效果。

可行的解决方案 #

方案1：先定义变量，再赋值给属性（推荐） #

这是最符合CSS变量设计初衷的用法：先把需要复用的值定义成变量，再把变量应用到width和其他需要的地方。这样变量和width就共享同一个值了，完美满足你的需求：

.container {
  /* 先定义变量 */
  --container-width: 10px;
  /* 把变量赋值给width */
  width: var(--container-width);
  /* 之后就可以在任意需要的地方复用这个变量 */
  padding: calc(var(--container-width) / 5);
  box-shadow: 0 0 var(--container-width) rgba(0,0,0,0.1);
}

方案2：用JS读取计算属性值，再设置变量（适合动态场景） #

如果你的width值不是固定写死的（比如是继承来的、浏览器自动计算的auto/fit-content，或者来自媒体查询的动态值），那只能借助JavaScript来实现：

1. 获取元素的计算后样式（也就是浏览器最终渲染的实际值）
2. 把这个值设置为元素的CSS变量

示例代码：

// 获取目标元素
const container = document.querySelector('.container');
// 获取计算后的width值
const computedWidth = getComputedStyle(container).width;
// 把值设置给CSS变量
container.style.setProperty('--container-width', computedWidth);

之后你就可以在CSS里正常使用var(--container-width)了。注意：如果元素的width后续发生变化（比如窗口 resize、动态修改样式），你需要重新执行这段代码来更新变量值。

补充说明 #

CSS本身没有原生语法支持“直接引用当前元素其他属性的计算值”，除了inherit、initial这类关键字，但它们是用来指定属性的继承/初始状态，不是用来引用其他属性值的。所以上面两种方案是目前唯一可行的解决方式。

内容的提问来源于stack exchange，提问作者Abs