如何在(S)CSS、SASS或Less中添加自定义全局预设命名颜色？

无论是原生CSS、SCSS/Sass还是Less，都无法向浏览器内置的CSS命名颜色列表中新增自定义颜色关键字。

核心原因 #

你用到的aliceblue这类可直接写值的命名颜色，是CSS Color规范明确定义、由浏览器内核硬编码实现的内置关键字，属于CSS解析层面的底层预设，不支持运行时或编译时扩展。
如果直接在样式里写未被规范收录的自定义颜色名，比如color: brand-blue;，浏览器会直接判定该属性值无效，整条样式规则会被忽略，不会生效。不管是CSS自定义属性，还是SCSS/Less这类预处理器，都无法修改浏览器的底层CSS解析逻辑，自然没法给内置颜色列表加新条目。

可实现近似体验的替代方案 #

虽然没法新增原生级别的命名颜色，但不管是原生CSS还是预处理器，都有成熟方案实现「全局定义一次、全项目直接调用自定义颜色」的效果，使用体验和内置命名颜色差距很小：

• 原生CSS自定义属性（CSS变量）
  就是你已经在使用的方案，在全局:root选择器下定义变量后，全项目所有样式文件都可以通过var()语法调用：

  /* 全局styles.scss中定义 */
  :root {
    --blueish: #658bc7;
  }
  
  /* 任意样式文件中使用 */
  p {
    color: var(--blueish);
  }
  

  这个方案的优势是支持运行时动态修改，比如实现深色/浅色模式切换时，只需要修改根节点的变量值，全站所有引用该变量的样式都会自动更新，不需要重新编译样式文件。
• SCSS/Sass全局变量
  如果不想每次调用都写var()，可以用SCSS的变量能力，把颜色定义为$开头的SCSS全局变量，在Angular项目中只需要在angular.json里配置好全局样式预处理器选项，把定义变量的文件设为全局注入，就可以在任意组件样式里直接调用，不需要单独导入：

  /* 全局SCSS变量定义 */
  $blueish: #658bc7;
  
  /* 任意样式文件中直接使用，编译时会被自动替换为实际色值 */
  p {
    color: $blueish;
  }
  

• Less全局变量
  逻辑和SCSS变量完全一致，只是Less的变量以@开头，配置全局注入后同样可以全项目直接调用：

  /* 全局Less变量定义 */
  @blueish: #658bc7;
  
  /* 使用 */
  p {
    color: @blueish;
  }
  

注意：SCSS和Less的变量属于编译时静态替换，最终生成给浏览器的CSS文件里不会保留变量，只会剩下对应的原始色值，因此不支持运行时动态修改。

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