css自定义属性（css变量）

时间：2023-03-30 22:08:25 CSS

前言开头的“css变量”展开后称为“css自定义属性”。当各种预处理器满天飞的时候，css变量也逐渐流行起来，在特定的应用场景中，css变量确实起到了很大的作用。开始学习css变量文本1.CSS选择器的变量声明和使用不能以数字开头。JS中的变量不能直接为数值。但是，在CSS变量中，这些限制都不存在。但不能包含$、[、^、(、%等字符。常用字符仅限于“数字[0-9]”、“字母[a-zA-Z]”、“下划线_”、“破折号”-"但是，这些组合可以是中文、日文或韩文。1.声明：区分大小写，--variable-name:variable-value;:root{--color:red;}2.使用：usevar(variablename)使用一个变量#div{color:var(color)}3。变量的组合在使用变量时，通常不会单独使用。它们可以组合使用。当变量的值为字符串时，可以直接拼接，如下：root{--screen-category:'category'//变量值为字符串}body:after{content:'--screen-类别：'var（--屏幕类别）；//直接拼接}当变量的值为数值时，必须使用calc()函数计算，即使还是简单的unitsplicing.foo{--gap:20;/*无效*/margin-top:var(--gap)px;}.foo{--gap:20;margin-top:calc(var(--gap)*1px);}4.未定义的变量和错误的定义如果我们使用的变量没有定义，那么使用下面的值作为元素的属性值，如下图，body无法访问.box定义的--1，所以使用#cd0000.box{--1:#369;}body{background-color:var(--1,#cd0000);}在使用变量时，如果已经定义了变量，但是变量的值不正确，则使用默认值，如：body{--颜色：20px；背景色：#369；background-color:var(--color,#cd0000);}结果体的颜色是透明的，因为缺少background-color省值是透明的2.继承和作用域1.作用域使用：root{}定义全局css变量如果您希望变量在本地可用，请在特定选择器或以下代码下定义它：root{color:red;//全球可用}.box{--1:#369;//仅在.box范围内可用}body{background-color:var(--1,#cd0000);}2.继承

.wrapper{--color:red;}.content1{--color:yellow;}content1的--color为黄色。content2的--color未定义。继承自wrapper的--color为red--color:yellow只在content1范围内有效。3、JS操作css变量：root{--color:red;}//读取varroot=getComputedStyle(document.documentElement);varcolor=root.getPropertyValue('--color').trim();console.log（颜色）;//'70px'///更改document.documentElement.style.setProperty('--color','yellow');varcolor=root.getPropertyValue('--color').trim();控制台日志（颜色）；//'100px'//删除document.documentElement.style.removeProperty('--color');varcolor=root.getPropertyValue('--color').trim();console.log(color);//'70px'四、与预处理器（sass、less）相比1.css变量：动态的，可以在运行时改变，可以从js方便的读写，可以继承，组合，有作用域2.预处理器：预处理器变量不是动态的，不能在运行时更改。预处理器变量没有作用域，不能与js交互。5.兼容性基本兼容大部分主流浏览器，直接使用没有太大问题。如果想使用但又想兼容所有浏览器，使用下面的方法检测浏览器是否支持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属性');}6.常用场景使用颜色变量一致的组件属性，统一样式（布局、定位等）.)避免代码冗余（响应式布局，制动动画）这里是一个常见场景的演示：https://github.com/shinyshine...