【CSS】我如何解释CSS变量的好
博客阐明
文章所波及的材料来自互联网整顿和集体总结，意在于集体学习和教训汇总，如有什么中央侵权，请分割自己删除，谢谢！
阐明
其实多说变量有多好，干咱们这行的都晓得。就说JS，没了变量，那代码就乱了套。那可读性和代码的篇幅，都让程序员成为一次性工，没法复用。
所以CSS的变量的作用十分之大（原谅没啥墨水的程序员），虽说CSS逻辑没有那么简单，但对于代码的可读性有着大大的加强。CSS作为款式官，那么良好的代码格调，不正是合乎它的格调吗。
CSS 变量能够拜访 DOM，这意味着您能够创立具备部分或全局范畴的变量，应用 JavaScript 来批改变量，以及基于媒体查问来批改变量。
对于一些字体或者色彩来说，用变量是最好的抉择。
var()函数
var() 函数用于插入 CSS 变量的值。
语法
var(name, value)| 值 | 形容 |
|---|---|
| name | 必须。变量名（以两条破折号结尾）。 |
| value | 可选。回退值（在未找到变量时应用）。 |
全局应用
全局应用的话在 :root 选择器中申明。
:root 选择器匹配文档的根元素。
:root { --blue: #1e90ff;}body { background-color: var(--blue); }部分应用
部分应用就是有部分作用域的变量，只须要在应用它的选择器中申明。
element { --main-bg-color: brown; background-color: var(--main-bg-color);}变量的类型
字符串
如果变量值是一个字符串，能够与其余字符串进行拼串
--main:"hello"; --text: var(--main)"world ! ";数值
如果变量的值为数值，则在应用的时候不能够与数值单位间接连用
.text { --main: 30; /* 有效 */ margin-top: var(--main)px;}须要应用的时候须要通过calc()函数
.text { --main: 30; margin-top: calc(var(--main) * 1px);}如果在赋值的时候带着单位的话，间接写，不须要应用字符串模式，否则有效。
响应式布局
CSS 是动静的，页面的任何变动，都会导致采纳的规定变动。
在响应式布局的 media命令外面申明变量，能够让不同屏幕有着不同的变量值
body { --primary: #DE783F; --success: #E7ED2F;}@media screen and (min-width: 768px) { body { --primary: #F7EF29; --success: #FF753F; }}@media screen and (min-width: 1440px) { body { --primary: #F745F2; --success: #E7F53F; }}span { color: var(--primary); text-decoration-color: var(--success);}浏览器反对
表格中的数字注明了齐全反对该属性的首个浏览器版本。
总结
- CSS能够加重工作的复杂性，更不便批改和增加，改一处就能利用到其余中央。
- 变量自身是蕴含语义的信息，使代码更易于浏览（更容易了解）。main-theme-color比单纯呈现在文档中的#e3ff34要更加容易了解，也不便改变。在不同的文件中呈现雷同的色彩也好定义阐明。
感激
万能的网络
以及勤奋的本人，集体博客，GitHub测试，GitHub
公众号-归子莫，小程序-小归博客