CSS基础--CSS-CSS3原生变量var详解
时间：2023-03-30 14:19:48
CSS
语法首先来看一个例子：HTML代码：Thisisaparagraphoftext
CSS代码：.元素{宽度：200px;高度：200px；--main-bg-颜色：#000；颜色：#fff；background-color:var(--main-bg-color);}实现效果：结果是DOM元素的背景变成了黑色。CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)，其中*代表我们的变量名。关于命名，各种语言都有一些说明。比如CSS选择器不能以数字开头，JS中的变量不能直接为数值。但是，在CSS变量中，这些限制是完全没有的，例如：root{--main-bg-color:#000;}.element{background-color:var(--main-bg-color);}注意：变量名不能包含$、[、^、(、%等字符，普通字符是有限制的只要是“数字[0-9]”、“字母[a-zA-Z]”的组合，“underscore_”和“dash-”，可以是中文、日文或韩文，例如：.element{width:200px;height:200px;--black:#000;color:#fff;background-color:var(--black);}css变量的完整语法：CSS变量的完整语法是：var([,]?)，中文意思是：var(<自定义属性名>[,<默认值]?)，即就是，如果我们不定义变量名，那么下面的值会作为它的默认属性值。如下：.element{background-color:var(--new-bg-color,#EE0000);}得到的结果当然是背景颜色后面的值。我们来看看如果变量名不合法会发生什么，看下面的例子：body{--color:20px;背景色：#369；background-color:var(--color,#cd0000);}请问，此时的背景色是什么？A.透明B.20pxC。#369D。#cd0000答案是：A.在transparentCSS变量中，如果发现变量值不合法，比如上面的背景色显然不能是20px，那么就使用背景色的默认值，也就是默认值相反，上面的CSS等价于：body{--color:20px;背景色：#369；background-color:transparent;}css变量在js中的应用见下例，html代码：
Thisisapieceoftext css代码：#jsDom{--my-可变宽度：200px；背景色：#000；颜色：#fff；宽度：var(--my-varwidth);高度：200px；}js代码：varelement=document.getElementById('jsDom');varcurWidth=getComputedStyle(element).getPropertyValue("--my-varwidth");console.log(curWidth);//200px//设置后DOM元素的宽度变为300pxelement.style.setProperty("--my-varwidth",'300px');如果样式写在行之间怎么办？然后进行如下操作：html代码：
Thisisapieceoftext js代码：var元素=文档。getElementById('jsDom');变量curWidth=element.style.getPropertyValue("--my-varwidth");console.log(curWidth);//400px浏览器兼容浏览器兼容性如图：IE11目前还不支持这个css变量目前为止，感觉这个css变量也很强大，所以和preprocessor相比，你觉得哪个是更好的？让我们谈谈预处理器的缺点。预处理器缺点预处理器变量不是实时的对于新手来说，也许令人惊讶的是，预处理器限制最常见的情况是Sass无法在媒体查询中定义变量或使用@extend。$gutter:1em;@media(min-width:30em){$gutter:2em;}.Container{填充：$gutter;}上面的代码会被编译成：.Container{padding:1em;}上面的结果可以看出，媒体查询块被丢弃，变量赋值被忽略。由于无法根据匹配的@media规则来改变变量，唯一的选择是为每个媒体查询分配一个唯一的变量并单独编写每个变体。预处理器变量不能级联无论何时使用变量，都不可避免地会出现作用域问题。这个变量应该设置为全局变量吗？它应该限定在一个文件或模块中吗？它应该限于块吗？由于CSS的最终目的是为HTML设置样式，因此事实证明还有另一种有效的方式来限定变量的范围：DOM元素。但是由于预处理器不在浏览器中运行并且看不到标记，所以它们不能。假设有一个网站，面向喜欢较大文本的用户，将类user-setting-large-text添加到元素。设置此类时，应应用较大的$font-size变量赋值：$font-size:1em;.user-setting-large-text{$font-size:1.5em;}body{font-size:$font-尺寸;但同样，就像上面的媒体块示例一样，Sass完全忽略了该变量的赋值，这意味着这不会发生。编译后的代码如下：body{font-size:1em;}预处理器变量不被继承虽然继承严格来说是级联的一部分，但是之所以把它分离出来是因为很多时候你想调用这个特性但是没有.假设您想要根据父元素应用的颜色来设置DOM元素的样式：color:oranged;}.alertbutton{border-color:darken(background-color,25%);}上面的代码不是有效的Sass（或CSS），但你应该知道它试图做什么达到。最后一条语句尝试在
