CSS 高级语法
CSS 变量
自定义属性，也被称作 CSS 变量或者级联变量可用于存储在整个文档中重复使用的数据，如颜色体系中的颜色值可能在项目的多个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换十分麻烦，可以用 CSS 变量将其存储起来，并在各处的规则集中使用这个变量引用对应的值，便于后期的维护；此外使用具有语义化的变量名，便于使用理解。
/* 声明一个自定义属性 */
element {
--main-bg-color: brown;
}
/* 使用变量 */
element {
background-color: var(--main-bg-color);
}
一般选择器使用 :root 伪类，将变量与数据的绑定设置在文档的根元素，该变量就可以在整个文档需要的地方使用
Tip
CSS 自定义变量格式是 --*，其中 -- 为前缀，* 可以是数字、字母、下划线、连字符。
Warning
自定义属性受级联的约束，并从其父级继承其值。
Tip
也可以使用 Less 或 Sass 等语言编写样式规则集，但是需要使用预处理器进行额外的编译，将这些文件转换为标准的 CSS 文件。
CSS 函数
Tip
参考：CSS中的函数
函数标记是一种可以表示更复杂类型或调用特殊处理的组件值类型。
调用语法与一般的编程语言中使用的函数类似，从函数名开始，紧接着是左括号，然后是参数到符号，然后是右括号。
calc()
Tip
该标记函数在声明 CSS 属性值时执行一些计算。如 <length>、<frequency>、<angle>、<time>、<number>、或 <integer> 等属性
calc() 函数用一个表达式作为它的参数，用这个表达式的结果作为值
- 表达式中的操作数可以使用任意
<length>值。 - 可以在一个表达式中混用这类值的不同单位
- 在需要时，你还可以使用小括号来建立计算顺序。
- 表达式可以是任何如下操作符的组合:
+加法-减法*乘法，乘数中至少要有一个是<number>类型的/除法，除数（/右面的数）必须是<number>类型的
Tip
+ 和 - 运算符的两边必须始终要有空白符；* 和 / 运算符不需要空白符，但考虑到统一性，仍然推荐加上空白符。
示例
/* 设置图片宽度，在两张并列图片之间插入 10px 间隔 */
img {
margin-right: 10px;
max-width: 100%;
width: calc((100% - 10px)/2);
}
/* 设置第二张图片右侧外边距为 0（仅在两图片而非图片与边框之间插入间隔） */
img:last-of-type {
margin-right: 0;
}
minmax()
CSS 函数 minmax() 定义了一个长宽范围的闭区间， 它与网格布局 CSS Grid 一起使用。
此函数包含两个参数，最小值 和 最大值，每个参数可以是使用绝对单位或相对单位的数值，或者是 max-content、min-content、或 auto 之一。