CSS变量研究

时间：2023-03-31 01:30:35 CSS

CSS变量可以帮助我们在一些命令式编程语言中，如Java、C++或JavaScript，我们可以通过变量来跟踪某些状态。变量是与特定值相关联的符号，其值可以随时间变化。在CSS这样的声明式语言中，不存在随时间变化的值，所以没有变量的概念。CSS引入了分层变量的概念，可以从容应对可维护性挑战。这样就可以在整个CSS树中符号化地引用一个变量1.什么是CSS变量CSS变量目前有两种形式：variable，有合法的标识符和合法的值。可以在任何地方使用。可以使用var()函数使用变量。例如：var(--example-variable)将返回与--example-variable对应的值自定义属性。这些属性对名称使用--where特殊格式。例如--example-variable:20px;甚至一个CSS语句。意思是给--example-varibale变量赋值20px2.变量声明变量名变量声明用两行连字符--来表示变量。$color属于Sass的语法，@color属于Less的语法。为避免冲突的css原生变量使用--)注意：变量名区分大小写，--header-color和--Header-Color是两种不同的变量声明方式CSS变量声明很简单，如下，声明一个命名的colorCSS变量。在html标签的inline-style中写入css文件，用JS声明一个元素，method.style.setPropertybody{--color:red;}document.getElementsByTagName('body')[0].style.setProperty('--color','red')变量值的类型如果变量值是字符串，可以和其他字符串拼接--bar:'hello';--foo:var(--bar)'world';body:after{content:'--screen-category:'var(--screen-category);}如果变量值是一个值，不能与数值单位直接使用，必须用calc()函数连接起来。foo{--gap:20;/*无效*/margin-top:var(--gap)px;}.foo{--gap:20;margin-top:calc(var(--gap)*1px);}如果变量值有单位，则不能写成字符串/*invalid*/.foo{--foo:'20px';字体大小：var(--foo);}/*有效*/.foo{--foo:20px;字体大小：var(--foo)；注意：变量值只能作为属性值，不能作为属性名。foo{--side:margin-top;/*invalid*/var(--side):20px;}上面代码中，变量--side作为属性名，是无效的。3.CSS变量的继承&作用域自定义属性也支持继承。元素上没有定义自定义属性，自定义属性的值会继承其父元素class="one">

定义以下CSS：.two{--test:10px;}.three{--test:2em;本例中var(--test)为：class="two"对应的节点：10pxclass="three"对应的节点：element对应的节点：2emclass="four"：节点对应的节点10px(继承自它的parent)class="one":无效值，即该属性的值为自定义css变量未覆盖的默认值。最顶层的范围是：root4.Responsivediv{--color:#7F583F;--bg:#F7EFD2;}.mediabox{颜色:var(--color);背景：var(--bg);}@mediascreenand(min-width:768px){body{--color:#F7EFD2;--背景：#7F583F；}}51.预处理器变量不是实时的$color:#7F583F;@mediascreenand(min-width:768px){$color:#F7EFD2;}.mediabox{background:$color;}编译结果。媒体框{背景：#7F583F；}2.预处理器不能限制范围$zcolor:blue;.ulbox{$zcolor:red;}ul{color:$zcolor;}编译成ul{color:blue;}3。预处理器变量不可互操作。本机CSS自定义属性可用于任何CSS预处理器或纯CSS文件。六。JSManipulationVariablesCSS变量可以和JS一起使用相互交互：root{--testMargin:70px;}//读取varroot=getComputedStyle(document.documentElement);varcssVariable1=root.getPropertyValue('--testMargin').trim();console.log(cssVariable1);//'70px'//写入document.documentElement.style.setProperty('--testMargin','100px');varcssVariable2=root.getPropertyValue('--testMargin').trim();console.log(CSS变量2);//'100px'//删除document.documentElement.style.removeProperty('--testMargin');varcssVariable3=root.getPropertyValue('--testMargin').trim();console.log(cssVariable3);//'70px'VII.兼容性检查浏览器是否支持CSS自定义属性/*css*/@supports((--a:0)){/*支持*/}@supports(not(--a:0)){/*不支持*///Jsif(window.CSS&&window.CSS.supports&&window.CSS.supports('--a',0)){alert('支持CSS属性');}else{alert('CSS属性areNOTsupported');}https://caniuse.com/#search=c...总结与传统的LESS、SASS等预处理器变量相比，CSS变量的优点是：CSS变量是动态的，可以在运行时改变页面正在运行，而传统的预处理器变量在编译后无法更改。改变CSS变量可以继承，可以组合使用，有作用域，可以与Javascript一起使用，并且可以很容易地从JS读取/写入。参考CSS变量教程UsingCSSVariablesCSS变量和预处理器变量的区别