文章内容

2021/5/28 11:34:55,作 者: 黄兵

css var()函数

最近在使用css的时候,遇到var()函数,经过查询,var()函数主要可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。(这样做通常会产生无效的语法或者一个没有关联到变量的值。)

具体语法可以参考这里:MDN Web Docs - var()

下面是一些示例:

:root {
--mdc-typography-headline2-font-family: "Google Sans", Roboto, sans-serif;
--mdc-typography-headline2-font-size: 1.5rem;
--mdc-typography-headline2-line-height: 1.2;
--mdc-typography-headline2-font-weight: 400;
--mdc-typography-headline2-letter-spacing: -.0083333333em;
--mdc-typography-headline2-text-decoration: unset;
--mdc-typography-headline2-text-transform: unset;
}

之后使用上面定义的值:

h2 {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: Roboto, sans-serif;
font-family: var(--mdc-typography-headline2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
font-size: 1.5rem;
font-size: var(--mdc-typography-headline2-font-size, 1.5rem);
line-height: 1.2;
line-height: var(--mdc-typography-headline2-line-height, 1.2);
font-weight: 400;
font-weight: var(--mdc-typography-headline2-font-weight, 400);
letter-spacing: -.0083333333em;
letter-spacing: var(--mdc-typography-headline2-letter-spacing, -.0083333333em);
text-decoration: inherit;
-webkit-text-decoration: var(--mdc-typography-headline2-text-decoration, inherit);
text-decoration: var(--mdc-typography-headline2-text-decoration, inherit);
text-transform: inherit;
text-transform: var(--mdc-typography-headline2-text-transform, inherit);
color: #212121;
margin: 0;
}

这里使用:root伪类定义了根元素,申明全局变量时使用。

分享到:

发表评论

评论列表