能否通过组合拼接CSS变量实现同时包含属性名与属性值？

首先明确结论：你尝试的这种把属性名、冒号、属性值拆分后存在CSS自定义属性里，再拼接成完整声明直接使用的写法，原生CSS完全不支持，核心原因和可行方案如下：

为什么原写法无效 #

1. 首先你的代码存在基础语法错误：匹配根元素的选择器是:root，不是你写的root:，冒号需要写在root前面。
2. 最核心的限制来自CSS的解析顺序：浏览器解析CSS规则块时，会先扫描每条声明的第一个冒号，把冒号前的内容识别为属性名、冒号后的内容识别为属性值，之后才会对属性值里的var()做替换计算。你写的.myclass {var(--aic);}里根本没有显式的冒号，浏览器会直接把var(--aic)当成属性名，整行声明直接判定为无效——哪怕你在变量内容里写了冒号也没用，因为属性名和值的分割步骤在变量替换之前就已经完成了。
3. CSS自定义属性的设计定位就是存储合法的CSS属性值，不能存储属性名、冒号这类CSS语法结构片段，强行存储这类内容不会被解析器识别为有效语法。

可实现同类需求的可行方案 #

你想实现的“拆分复用CSS声明片段”的需求，不需要硬走“变量里存冒号拼接”的思路，有成熟的替代方案：

• 方案一：仅复用属性值（兼容性最好，全现代浏览器支持）
  只把需要复用的属性值存在自定义属性里，属性名在使用的地方显式书写即可，这也是官方推荐的自定义属性用法：

  :root {
    --pos-center: center;
  }
  .myclass {
    align-items: var(--pos-center);
    justify-content: var(--pos-center);
    text-align: var(--pos-center);
  }
  

• 方案二：复用整组属性声明（适合批量复用多组属性）
  如果你需要把“属性名+属性值”的完整声明片段批量复用，可以使用Sass/Less等CSS预处理器的mixin、变量插值能力，完全可以实现你要的拆分组合效果：

  // 定义可复用片段
  $align-items: align-items;
  $center: center;
  
  // 使用时直接拼接
  .myclass {
    #{$align-items}: $center;
  }
  // 编译后最终生成的CSS就是标准的 .myclass { align-items: center; }
  

• 补充说明：原生CSS曾经提案过@apply规则用来实现整组声明的复用，但该提案目前已被搁置，没有稳定的浏览器支持，不建议在生产环境使用。

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