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

Question

我目前正在开发一个使用 DSM invision 进行 UI 设计的 React 项目，基本上，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 变量吗？或者我必须使用单个变量？

Answer 1

CSS变量中没有对象概念。您需要单独使用它们，但您也可以将它们组合在同一个变量中，您以后可以根据属性的简写表示法使用它们。

示例：

:root {
/* button fonts/default/5-warning font style */
--font-button-fonts-default-5-warning-font-size: 30px;
--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:  
    var(--font-button-fonts-default-5-warning-font-style)
    var(--font-button-fonts-default-5-warning-font-weight)
    var(--font-button-fonts-default-5-warning-font-size)/
    var(--font-button-fonts-default-5-warning-line-height)
    var(--font-button-fonts-default-5-warning-font-family);
}
.warning {
  font:var(--font-button-fonts-default-5-warning);
  color: var(--font-button-fonts-default-5-warning-color);
  letter-spacing: var(--font-button-fonts-default-5-warning-letter-spacing);
  text-align:var(--font-button-fonts-default-5-warning-text-align);
}

<p>text here</p>
<p class="warning">text here</p>

我们几乎可以使用字体中的所有值，但不能使用您需要单独使用的 color、letter-spacing 和 text-align。

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

how to use CSS variable which has multiple property

css

css-variables

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

how to use CSS variable which has multiple property

css

css-variables

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