css变量定义和兼容性(命名规则和使用方法)

 分类:div+css教程时间:2022-06-28点击:

只能在less和sass等预处理器里写css变量吗?不是的早在2015年css3中就新增了变量的特性。css变量的优势可以为我们带来一些预处理器的便利,并且不需要额外的编译。还能实现css变量换肤功能。

一、css变量兼容性

到目前为止,各大浏览器厂商基本支持了这个新特性。

css变量定义和兼容性

肯定有小伙伴想,一些css预处理器也支持变量啊,比如less,sass等。css变量和预处理器里面的变量有着本质的区别,css变量是浏览器支持的特性,而预处理器的变量近在css的处理过程中支持,处理完成后这些变量会代替为具体的值。

二、css变量定义

:root  {
--main-bg-color: #eee;
}

上面的代码定义了一个名为--main-bg-color的变量。变量名前必须有两个连字符(--)。

变量必须在一个声明块内声明。这里使用了:root选择器,因此这个变量可以在整个网页使用。这里可以推断出,css变量是有作用域的概念的,如果是定义在别的选择器里面的话,只能在应用了这个选择器元素的子元素所用的类中去引用这个变量。

1、我们看个具体的例子

:root、page-content选择器中定义了分别定义了--main-color、--content-color两个颜色变量。在类page-content中可以引用--main-color,在类page-content-spec中可以引用--content-color,而在类page-title中无法引用--content-color变量。

2、动态改变css variables

不要将css variables理解为一个全局的常量,定义在:root中,在子选择器中引用;应该被看作一个选择器的入参,输入不同的参数,有不同的表现。简单来说,可以定义一个变量为黑色,然后在某个容器中重新将其定义为白色。那么基于该变量的任何样式,在容器外部都会动态解析为黑色,而在容器内部会动态解析为白色。

三、css变量命名规则

1、变量名前必须有两个连字符(--)

2、自定义属性名是大小写敏感的,--my-color 和 --My-color 会被认为是两个不同的自定义属性。

四、css变量的使用方法

1、通过var()函数来读取变量。语法如下:

var(custom-property-name, value)

1)name (必需) 变量名(以两条破折号开头)。

2)value (可选) 表示变量的默认值。如果该变量不存在,就会使用这个默认值。

变量名称必须以两个破折号(--)开头,且区分大小写!

2、使用方法:

element {
  background-color: var(--main-bg-color);
}

3、变量也可以使用在变量声明中:

:root {
  --primary-color: #eee;
  --primary-bg-color: var(--main-bg-color);
}

变量值只能用作属性值,不能用作属性名。

五、js操作css变量

在js代码中,我们可能需要读取css变量的值,其方法如下:

const root = document.querySelector(":root");
// 设置 CSS 变量
root.style.setProperty("--main-bg-color", "red");
// 读取 CSS 变量
const computedStyle = getComputedStyle(root);
const mainBgColor = computedStyle.getPropertyValue("--main-bg-color");
console.log(mainBgColor);
// 删除 CSS 变量
root.style.removeProperty("--main-bg-color");

六、最后总结

1、利用这种技术,是不是可以方便的提取网页主题等特性,实时切换网站主题?实现css变量换肤功能。

2、虽然大部分浏览器厂商都支持了css变量特性,但是某些厂商和版本依然不支持,所以我们在使用这个特性的时候,应该准备一个回退方案,类似下面的例子(相当于设置了一个默认值):

color: black;
color: var(--main-color)

3、css变量的优势可以为我们带来一些预处理器的便利,并且不需要额外的编译。

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: