--main-color 就是一个css变量:.button {--main-color: #e74c3c;}
为什么选择用--表示变量呢？因为$foo被 Sass 用掉了，@foo被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线。🤪
定义了变量后，如何使用呢？这里我们要用到 css 提供的 var 函数，用法如下:
.button{color:var(--main-color);}
它有第二个参数，用于指定回退值，如果前面的变量不存在，则会使用默认值，如下：
.button{color:var(--main-color,red);}// 多层嵌套也是可以的.button{color:var(--main-color,var(--second-color,red));}
ok,现在你已经了解了如何定义和使用css变量，但是不要忘了下面这些注意事项：
变量是有作用域的，要存在于css块里（即{}中），最高优先级的生效，子元素会继承父元素，在子元素中可以直接使用祖先元素的定义的css变量。
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
