如何在CSS的calc()函数中直接获取并使用元素自身的CSS属性值？

目前原生CSS不存在能够直接读取元素自身已定义CSS属性值参与calc()运算的通用get()类内置函数，你示例里的calc(100px - get(top))这类写法从CSS规范设计之初就没有被纳入正式语法。

• CSS的样式计算模型是单遍层叠解析的，如果允许在同个选择器的声明里任意读取其他属性的值参与计算，会彻底打破现有渲染引擎的性能模型，大幅增加样式计算的内存和时间开销。
• 大部分CSS属性的最终值在样式解析阶段并不是固定的静态值（比如百分比定位值、视口单位值、继承来的属性值），不存在一个可以直接引用的“已定义值”做计算，如果强行设计这类通用取值函数，会引入大量难以排查的循环依赖问题。

• 和你想要的“一次定义、多处复用参与运算”逻辑最匹配的原生方案，就是用CSS自定义属性（CSS变量）做静态值的统一存储，从根源上避免硬编码带来的值不一致问题。你不需要把变量声明在全局上层，直接写在对应元素的选择器内部就可以实现就近复用，示例写法：

.element {
  /* 在选择器内部就近声明需要复用的偏移值 */
  --offset-top: 30px;
  /* top属性引用同一个变量赋值 */
  top: var(--offset-top);
  /* calc运算也引用同一个变量，实现和你写的get(top)完全一致的效果 */
  width: calc(100px - var(--offset-top));
}

• 如果你需要读取的是元素渲染完成后的实际计算值（不是你自己在CSS里写的声明值），纯CSS层面没有任何实现路径，这类动态取值只能通过JavaScript的getComputedStyle()接口获取后再做样式赋值，CSS没有暴露这类运行时计算值的通用读取入口。

• 不要把attr()函数和需求搞混，标准的attr()接口目前只能读取元素的HTML属性值（比如自定义data-*属性），完全无法读取同元素的CSS属性值；哪怕是最新的CSS规范草案里提到的attr()读取CSS属性的能力，至今没有任何浏览器落地支持。
• currentColor是CSS里的特例化内置值，仅能读取当前元素的color属性计算值，属于早年为了方便边框、阴影、图标颜色和文字色统一做的特殊设计，不具备通用性，也不能扩展到top、left这类其他属性的取值场景。

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