Quarto中如何使用命名变量设置内联CSS文本颜色？

要实现用命名变量设置文本颜色，你需要先在文档中定义CSS自定义属性（变量），再通过正确语法引用它，具体步骤如下：

1. 在文档开头定义全局CSS变量
   在Quarto文档的YAML头部后嵌入<style>标签，通过:root选择器定义全局颜色变量：

   ---
   title: "示例文档"
   format: html
   ---
   
   <style>
     :root {
       --custom-green: #28A569; /* 自定义命名颜色变量 */
       --custom-blue: #1E88E5;
     }
   </style>
   

   这样定义的变量会作用于整个文档。

2. 在内联文本中引用变量
   之后就可以在Quarto的内联样式中通过var(--变量名)的语法调用颜色变量：

   这是一段使用自定义绿色的文本：[chemical]{style="color: var(--custom-green)"}
   这是一段使用自定义蓝色的文本：[example]{style="color: var(--custom-blue)"}
   

为什么之前的尝试无效？ #

你之前的写法存在两个关键问题：

• CSS变量需要提前通过选择器（如:root）定义，不能直接在样式中赋值
• 引用变量必须使用var(--变量名)的完整语法，仅写var无法识别具体变量

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