如何使用具有多个属性的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符号来使用。

举个例子。

: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>

给TA打赏
共{{data.count}}人
人已打赏
未分类

C# IQueryable LINQ Group By with null values.

2022-9-11 2:56:39

未分类

在Kubernetes中为react和react-native应用提供Express API。

2022-9-11 2:56:41

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索