CSS变量是什么
CSS 变量当前有两种形式：
- 变量，就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用变量。例如：var(--example-variable)会返回--example-variable所对应的值
- 自定义属性。这些属性使用--where的特殊格式作为名字。例如--example-variable: 20px;即一个css声明语句。意思是将20px赋值给--example-varibale变量。
自定义属性和常规属性一样，作用在当前的层级，若没有定义，则从其父元素继承其值。
自定义属性
带有前缀--的属性名，比如--example--name，表示的是带有值的自定义属性，其可以通过 var 函数在全文档范围内复用的。
用这样的方式来声明一个变量：--variable-name: variable-value;（变量名是大小写敏感的，可以是数字[0-9]字母[a-zA-Z]下划线_和短横线-”这些组合）。变量的值可以是颜色、字符串、多个值的组合等:
:root{
--main-color: #4d4e53;
--main-bg: rgb(255, 255, 255);
--logo-border-color: rebeccapurple;
--header-height: 68px;
--content-padding: 10px 20px;
--base-line-height: 1.428571429;
--transition-duration: .35s;
--external-link: "external link";
--margin-top: calc(2vh + 20px); }
自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来。
自定义属性特点：
- 动态性，可以在运行时更改
- 可以方便的从JS中读/写
- 可继承，可组合，同时具有作用域
2、变量var()
方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。
var( <custom-property-name> , <declaration-value>? )
自定义属性的回退值允许使用逗号。例如，
var(--foo, red, blue)将red, blue同时指定为回退值；即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值。
<custom-property-name> 自定义属性名
在实际应用中它被定义为以两个破折号开始的任何有效标识符。 自定义属性仅供作者和用户使用; CSS 将永远不会给他们超出这里表达的意义。
<declaration-value> 声明值（回退值）
回退值被用来在自定义属性值无效的情况下保证函数有值。回退值可以包含任何字符，但是部分有特殊含义的字符除外，例如换行符、不匹配的右括号（如)、``]或``}）、感叹号以及顶层分号（不被任何非var**()**的括号包裹的分号，例如var(--bg-color, --bs**;**color)是不合法的，而var(--bg-color, --value**(**bs;color**)**)是合法的）。
p { margin: var(--p-margin, 0 0 10px); }
var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。
解决的问题
- 为风格统一而使用颜色变量
- 一致的组件属性（布局，定位等）
- 提炼重复信息，避免代码冗余，易于管理和变更；
- 包含语义信息，使CSS文本变得易读和理解；
CSS变量用法
基本用法
声明一个局部变量：
element {
--main-bg-color: #f7f7f7;
}
使用局部变量：
element {
background-color: var(--main-bg-color);
}
声明一个全局变量：
:root {
--global-color: #666;
--pane-padding: 5px 42px;
}
使用一个全局变量：
.demo{
color: var(--global-color);
}
:root：匹配文档树的根元素，即html元素；相较html选择器具有更高的优先级。
CSS 变量的组合
:root{
--word:"this";
--word-second:"is";
--word-third:"CSS Variable";
}
div::before{
content:var(--word)' 'var(--word-second)' 'var(--word-third);
}
无效的值
如果CSS变量有一个无效的值，比如 --background: blah blah blah; 或拼写错误 --background: yelow; /* yellow 拼写错误 */，那么 CSS 属性将默认采用默认值，如：
-
background默认值是transparent -
width默认值是auto -
position默认值是static -
opacity默认值是1 -
display默认值是inline
body {
--color: 20px;
background-color: #369;
background-color: var(--color, #cd0000);
}
<body>的背景色是transparent。
内联样式中的 CSS 变量
<div style="--size:200px;--color:#FFFFFF;">
<p>Component Size from inline style</p>
</div>
div{
width: var(--size);
height: var(--size);
}
div p{text-align: center; color:var(--color) }
与 JS 互相交互
:root{
``--testMargin:``75px``;
}
// 读取
var` `root = getComputedStyle(document.documentElement);
var` `cssVariable = root.getPropertyValue(``'--testMargin'``).trim();
console.log(cssVariable); ``// '75px'
// 写入
document.documentElement.style.setProperty(``'--testMargin'``, ``'100px'``);
结合媒体查询 @media
:root{
--width: 25%;
--content: 'This is desktop';
}
@media only screen and (max-width: 767px){
:root{
--width:50%;
--content: 'This is mobile';
}
}
@media only screen and (max-width: 480px){
:root{
--width:100%;
}
}
div{
width: calc(100% - var(--width) - 20px);
height: 100px;
}
div:before{
content: var(--content);
}
使用CSS变量来嵌套calc()
计算属性calc()
此CSS函数让你在声明CSS属性值时执行一些计算。此 calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。
使用“+”、“-”、“*” 和 “/”四则运算,可以使用百分比、px、em、rem等单位；
注：
- 用 0 作除数会让 HTML 解析器抛出异常.
+ 和 ``- 运算符的两边必须始终要有空白符。比如calc(50% -8px) 会被解析成为一个无效的表达式：一个百分比后跟一个负数长度值。而 calc(8px + -50%)会被解析成为一个长度后跟一个加号再跟一个负百分比。* 和 ``/ 运算符不需要空白符，但考虑到统一性，仍然推荐加上空白符。- 涉及自动和固定布局表中的表列，表列组，表行，表行组和表单元格的宽度和高度百分比的数学表达式可视为已指定auto
calc基本用法
div{
--size: 100%;
--padding: 20px;
--total-div: 4;
width: calc(var(--size) / var(--total-div) - var(--padding));
height: 50px;
}
用途：使用 calc() 可以很容易的为一个对象设置一个左右两边相等的外边距.
.banner {
position: absolute;
/* fallback for browsers which still doesn't support for `calc()` */
left: 5%;
width: 90%;
/* overwrite, if the browsers support for `calc()`*/
left: calc(40px);
width: calc(100% - 80px);
border: 1px solid black;
box-shadow: 1px 2px;
background-color: yellow;
padding: 6px;
text-align: center;
}
<div class="banner">This is a banner!</div>
与calc嵌套
使用 CSS 创建了一个横跨整个窗口的 banner,该 banner 左右两边各有一个距离窗口边缘 40 像素的间距；
.foo {
--widthA: 100px;
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);
在所有的变量都被展开后, widthC 的值就会变成 calc( calc( 100px / 2) / 2)，然后当它被赋值给 .foo 的 width属性 时，所有内部的这些calc()（无论嵌套的有多深）都将会直接被“拍”成一个括号（原文：be flattened to just parentheses），所以这个 width属性 的值就直接相当于 calc( ( 100px / 2) / 2)了，或者说就变成``25px了。 简而言之：一个 calc() 里面的 calc() 就仅仅相当于是一个括号。
其他
空值和空格
/* 无效的 */
--color:;
/* 有效的 */
--color: ; /* 值是空格 */
背景图片 url()
/* 无效的 - CSS 不支持拼接*/
.logo{
--logo-url: 'logo';
background: url('assets/img/' var(--logo-url) '.png');
}
/* 无效的 - CSS bug */
.logo{
--logo-url: 'assets/img/logo.png';
background: url(var(--logo-url));
}
/* 有效的 */
.logo{
--logo-url: url('assets/img/logo.png');
background: var(--logo-url);
}
CSS变量的空格尾随特性
body {
--size: 20;
font-size: var(--size)px;
}
此处的font-size:var(--size)px等同于font-size:20 px为无效值，采用<body>元素的默认大小。正确的使用方法为：
body {
--size: 20px;
font-size: var(--size); calc(var(--size) * 1px)
}
或者使用CSS3 calc()计算：
body {
--columns: 4;
--margins: calc(24px / var(--columns));
}
