一、 css变量的声明
* {
--dashboard-width130: 130px;
--dashboard-height120: 120px;
}
二、css变量的使用
:host ::ng-deep .guidance-icon-1 {
width: var(--dashboard-width130);
height: var(--dashboard-height120);
}
- var()函数用于读取变量
- var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值
color: var(--foo, #7F583F);
:root {
--primary-color: red;
--logo-text: var(--primary-color);
}
.foo {
--side: margin-top;
/* 无效 */
var(--side): 20px;
}
三、变量值的类型
--bar: 'hello';
--foo: var(--bar)' world';
.foo {
--gap: 20;
/* 无效 */
margin-top: var(--gap)px;
}
- 上面代码中,数值与单位直接写在一起,这是无效的。必须使用calc()函数,将它们连接。
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}
/* 无效 */
.foo {
--foo: '20px';
font-size: var(--foo);
}
/* 有效 */
.foo {
--foo: 20px;
font-size: var(--foo);
}