今天看了阮一峰老师的博客，看到一篇关于css变量的文章。。。自己在这边整理一下。
1.声明css变量：body{
--foo: #7F583F; --bar: #F7EFD2;
} 用--来声明变量，原因很简单因为$foo被sass用掉了，@foo被less用掉了，所以css变量声明选择--foo。
注意：变量只能用作属性值，不能用作属性名。如：--foo：margin-top； --foo：20px 错误！！！
2.var()函数：一个参数var(--foo)用于读取变量的值；两个参数 var （--foo，#456798）时，第二个参数为默认值，当变量不存在时，使用默认值。
注意：第二个参数不处理内部的逗号和空格：var（--foo，“tom”，“jack”），tom和jack为var（）的第二个参数。
var（--foo，10px 20px 15px），同理10px 20px 15px为第二个参数。
3.变量值的类型：变量为字符串时可以与其他字符串拼接。
--bar ："hello";
--foo : var(--bar)" world";
变量为数值时不能与单位直接连用，需要用calc（）函数进行拼接
--foo：20；
margin-top：var（--foo）px //无效
margin-top：calc（var（--foo）*1px）； // 有效
变量带有单位时，不能是字符串，写成字符串无效。
/* 无效 */ .foo { --foo: '20px'; font-size: var(--foo); }
/* 有效 */ .foo { --foo: 20px; font-size: var(--foo); }
4.变量的作用域：变量的作用域与css层叠样式的规则一致
<style> :root { --color: blue; } div { --color: green; } #alert { --color: red; } * { color: var(--color); } </style>
<p>blue</p> <div>green</div> <div id="alert">red</div>
全局变量通常放在 ：root {} 里面
基本的语法就这些，详情请看：http://www.ruanyifeng.com/blog/2017/05/css-variables.html。
注：本文代码部分都是手敲的，有些没有区分中英文，请不要直接copy到编辑器运行
转载于:https://www.cnblogs.com/chengxu931106/p/6860382.html
