CSS 变量与运算

1.变量

• 变量声明：变量名使用 "--" 为前缀，且区分大小写

/* 全局变量 */
:root{
    --bgColor: red;
}
/* 布局变量 */
p{
    --bgColor2: blue;
}

• 引用变量：使用var()方法进行引用

.box{
     height: 200px;
     background-color: var(--bgColor);
}

2.运算

• 用法：将表达式放入calc()中，加减乘除 符号两端要有空格隔开

width: calc(100% - 50px);