如何使用具有多个属性的CSS变量

我目前正在从事一个react项目，该项目使用DSM invision进行UI设计，基本上，DSM提供了一个css文件“_style-params”，其中包含样式变量

--color-primary: #00a2ff;
--color-secondary: #6c757d;
--color-success: #28a745;
--color-danger: #dc3545;

由于这种类型易于理解和使用，我只需将css文件导入我的主css文件并编写：

background-color:var(--color-primary);

但是，说到字体，我有一些问题： 以下来自_style-params.css：

/* button fonts/default/5-warning font style */
--font-button-fonts-default-5-warning-font-size: 16px;
--font-button-fonts-default-5-warning-line-height: 14px;
--font-button-fonts-default-5-warning-text-align: center;
--font-button-fonts-default-5-warning-color: #f0ad4e;
--font-button-fonts-default-5-warning-letter-spacing: 0.2px;
--font-button-fonts-default-5-warning-font-style: normal;
--font-button-fonts-default-5-warning-font-weight: 400;
--font-button-fonts-default-5-warning-font-family: Roboto;

--font-button-fonts-default-5-warning: {
  font-size: var(--font-button-fonts-default-5-warning-font-size);
  line-height: var(--font-button-fonts-default-5-warning-line-height);
  text-align: var(--font-button-fonts-default-5-warning-text-align);
  color: var(--font-button-fonts-default-5-warning-color);
  letter-spacing: var(--font-button-fonts-default-5-warning-letter-spacing);
  font-style: var(--font-button-fonts-default-5-warning-font-style);
  font-weight: var(--font-button-fonts-default-5-warning-font-weight);
  font-family: var(--font-button-fonts-default-5-warning-font-family);
};

我能用下面的变量吗？它是一个对象

var(--font-button-fonts-default-5-warning)

我不知道使用该变量的属性，我尝试了以下操作：

font:var(--font-button-fonts-default-5-warning)

这显然不起作用。 那么，我能使用这个对象CSS变量吗？

---

或者我必须使用单个变量？

CSS变量中没有对象概念。您需要单独使用它们，但也可以将它们组合在同一个变量中，稍后可以使用该变量，具体取决于属性的shothand符号

例如：

：根{ /*按钮字体/默认/5-警告字体样式*/ -font-button-font-default-5-warning-font-size:30px； -font-button-fonts-default-5-warning-line-height:14px； -font-button-font-default-5-warning-text-align：居中； -font-button-fonts-default-5-warning-color:f0ad4e； -font-button-fonts-default-5-警告-字母-间距：0.2px； -font-button-font-default-5-warning-font-style：正常； -font-button-font-default-5-warning-font-weight:400； -font-button-font-default-5-warning-font-family:Roboto； -font-button-fonts-default-5-警告： var-font-button-font-default-5-warning-font-style var-font-button-font-default-5-warning-font-weight var-font-button-font-default-5-warning-font-size/ var-font-button-font-default-5-warning-line-height var-font-button-font-default-5-warning-font-family； } .警告{ 字体：var-font-button-fonts-default-5-warning； 颜色：var-font-button-fonts-default-5-warning-color； 字母间距：var-font-button-fonts-default-5-警告-字母间距； 文本对齐：var-font-button-fonts-default-5-warning-text-align； } 此处文本

---

此处的文本

CSS变量中没有对象概念。您需要单独使用它们，但也可以将它们组合在同一个变量中，稍后可以使用该变量，具体取决于属性的shothand符号

例如：

：根{ /*按钮字体/默认/5-警告字体样式*/ -font-button-font-default-5-warning-font-size:30px； -font-button-fonts-default-5-warning-line-height:14px； -font-button-font-default-5-warning-text-align：居中； -font-button-fonts-default-5-warning-color:f0ad4e； -font-button-fonts-default-5-警告-字母-间距：0.2px； -font-button-font-default-5-warning-font-style：正常； -font-button-font-default-5-warning-font-weight:400； -font-button-font-default-5-warning-font-family:Roboto； -font-button-fonts-default-5-警告： var-font-button-font-default-5-warning-font-style var-font-button-font-default-5-warning-font-weight var-font-button-font-default-5-warning-font-size/ var-font-button-font-default-5-warning-line-height var-font-button-font-default-5-warning-font-family； } .警告{ 字体：var-font-button-fonts-default-5-warning； 颜色：var-font-button-fonts-default-5-warning-color； 字母间距：var-font-button-fonts-default-5-警告-字母间距； 文本对齐：var-font-button-fonts-default-5-warning-text-align； } 此处文本

此处的文本