CSS变量之var()函数的应用——动态修改样式 & root的使用

CSS变量之var()函数的应用——动态修改样式 & :root的使用

一、css变量

body {
  --foo: #7F593F;
  --urls: './img/xxx.jpg';
}

如上述代码，意思为：在body选择器里面声明了两个变量：–foo 和 –bar；

css声明变量不像Less的@foo，也不像sass的$foo，而是采取了不同形式的–foo，声明出来的变量和color、background-url 等正式属性没有什么不同，所以 CSS 变量又叫做**“CSS 自定义属性”**。

变量的名称可以用数字、汉字等，不能包含**$，[，^，(，%**等字符，变量的值也是可以使用各种属性值：

如：

// 定义css变量
:root{
  --黑色背景: #3a6b5c;
  --255: rgb(256, 256, 256);
  --pd: 10px 20px;
  --height: 200px;
  --transition-duration: .36s;
  --margin-top: calc(2vh + 20px);
}
      
// 使用css变量
div{
	color: var(--256);
	margin-top: var(--margin-top);
	padding: var(--pd);
	width: var(--height);
	height: var(--height);
	background-color: var(--黑色背景, #000);
}

:root是CSS 伪类匹配文档树的根元素。

对于 HTML 来说，:root 表示元素，除了优先级更高之外，与 html 选择器相同

二、var()函数使用

var() 函数是如何使用的

:root {
  --黑色背景: #3a6b5c;
}
body {
  background-color: var(--黑色背景, #000);
}

var(–黑色背景) 这段代码中，var() 函数是用来获取值自定义属性 –-黑色背景 的值。他代替元素中任何属性中的值的任何部分。var() 函数不能作为属性名、选择器或者其他除了属性值之外的值。

语法

var() 方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

:root {
  --黑色背景: #3a6b5c;
}
      
body {
  background-color: var(--黑色背景, #000);
}

如上述代码，我们若打错了变量名，找不到这个变量，var() 函数就会使用传入的第二个参数 #000

三、CSS变量和var()函数应用和注意点

1、CSS变量的继承

自定义属性同样支持继承。一个元素上没有定义自定义属性，该自定义属性的值会继承其父元素：

<div class="one">
	<div class="two">
         two
       <div class="three">
              three
       </div>
       <div class="four">
              four
       </div>
     <div>
</div>
<style>
	.one { --test: 14px; }
    .two { font-size:var(--test); }
	.three { 
        --test: 16px; 
        font-size:var(--test);
    }
    .four { font-size:var(--test); }
</style>

其中 .two 找不到自己选择器里的 –test变量，就会找到 .one 里面声明的 –test，同样，.four 找 .one 的 –test。

但是这种方式我们项目中不推荐，最好通过在 :root 伪类上设置自定义属性，然后在整个文档需要的地方使用，可以减少很多的重复性。

CSS变量支持同时多个声明吗？

类似下面这样：
…

类似不了，语法上就根本不支持。
自定义属性受级联的约束，并从其父级继承其值。

2、CSS变量的相互传递特性

就是说，我们在CSS变量定义的时候可以直接引入其他变量给自己使用，例如：

body {
  --green: #4CAF60;   
  --backgroundColor: var(--green);
  background:var(--backgroundColor);
}

或者更复杂的CSS3 calc()计算，例如：

body {
  --col: 4;
  --margins: calc(24px / var(--col));
}

3、JavaScript获取css变量

JavaScript 操作 CSS 变量的写法如下。

// 设置变量
document.body.style.setProperty('--黑色主题', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--黑色主题').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--黑色主题');

四、附

在构建大型站点时，网页中所使用的 CSS 的数量是非常庞大的，并且在许多场合大量的信息会重复使用。例如，在网页中维护一个配色方案，意味着一些颜色在CSS文件中多次出现，并被重复使用。当你修改配色方案时，不论是调整某个颜色或完全修改整个配色，都会成为一个复杂的问题，不容出错，而单纯查找替换是远远不够的。

CSS变量为我们带来一些预处理器的便利，并且不需要像Less或Sass等额外的编译。

这些变量的第二个优势就是名称本身就包含了语义的信息。

其次JS可以获取CSS变量也可以设置CSS变量，大大增加了JS和CSS之间的联系。