【CSS】如何解释CSS变量？博客说明文中所涉及的信息来源于网络和个人总结，意在作为个人学习和经验的总结。如有侵权，请联系我删除，谢谢！解释更多地谈论变量有多好，因为我们业务中的每个人都知道。就说JS吧，没有变量，代码就乱了。代码的可读性和长度使程序员成为一次性工作，无法重复使用。因此，CSS变量起到了非常重要的作用（原谅没有墨水的程序员）。虽然CSS逻辑没有那么复杂，但是大大增强了代码的可读性。CSS是风格官，好的代码风格并不完全符合它的风格。CSS变量可以访问DOM，这意味着您可以创建局部或全局范围的变量，使用JavaScript修改变量，以及基于媒体查询修改变量。对于某些字体或颜色，使用变量是最好的选择。var()函数var()函数用于插入CSS变量的值。语法var(name,value)valuedescriptionname必需。变量名称（以两个破折号开头）。值是可选的。后备值（在未找到变量时使用）。全局使用的词在:root选择器中声明。:root选择器匹配文档的根元素。:root{--blue:#1e90ff;}body{背景色:var(--blue);}LocaluseLocaluse是一个具有局部作用域的变量，只需要在使用它的选择器中声明即可。元素{--main-bg-color:brown;background-color:var(--main-bg-color);}变量类型string如果变量值是字符串，可以和其他字符串组合--main:"hello";--text:var(--main)"世界!";value如果变量的值是一个值，则不能直接与值单元一起使用。文本{--main:30;/*无效*/margin-top:var(--main)px;}需要使用的时候需要传入calc()函数.text{--main:30;margin-top:calc(var(--main)*1px);}赋值的时候如果有单位就直接写，不用字符串形式，否则无效。响应式布局CSS是动态的，页面的任何变化都会导致采用的规则发生变化。在响应式布局的媒体命令中声明变量，可以让不同的屏幕有不同的变量值body{--primary:#DE783F;--success:#E7ED2F;}@mediascreenand(min-width:768px){body{--primary:#F7EF29;--成功：#FF753F；}}@mediascreenand(min-width:1440px){body{--primary:#F745F2;--成功：#E7F53F；}}span{颜色：var(--primary);text-decoration-color:var(--success);}浏览器支持表中的数字表示第一个完全支持该属性的浏览器版本。小结CSS可以降低工作的复杂性，使修改和添加变得更加容易，而且改变一个地方可以应用到其他地方。变量本身是包含语义并使代码更易于阅读（更易于理解）的信息。main-theme-color比简单地出现在文档中的#e3ff34更容易理解和更改。定义相同颜色出现在不同文件中的指令也很容易。感谢无所不能的网络和努力的自己，个人博客，GitHub测试，GitHub公众号-桂子墨，小程序-小桂博客
