引言
前端的变量写法大致可以分为三大类,分别是CSS-in-JS,CSS预处理器,和CSS原生变量。作为前端开发人员,我们应该了解并善用它们,以便实现更加灵活、可维护的样式。本篇文章将与大家分享一下原生CSS的变量写法
概念
CSS变量也叫自定义属性,在它出现之前,CSS中使用的值通常是硬编码的(静态编写),这导致了样式代码的重复和冗余,在管理和维护大型项目时存在一些困扰和隐患
为了解决这个问题,CSS变量被引入到CSS规范中,使开发者能够声明并重复使用可自定义的样式属性。通过定义和使用变量,我们可以对样式集中管理,减少代码的冗余,提高维护性
语法
在CSS中,使用"--"前缀定义一个变量,例如:--variable。可以在:root伪类中定义变量实现全局作用域,也可以在特定选择器中定义变量以限定作用域。
定义完成后使用var()函数调用变量,并将变量名作为参数传递,例如:var(--variable)。在需要应用变量的地方,使用var(--variable)替代具体的数值或属性值。
基本用法
下面是一个全局变量定义以及使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
:root {
--primary-color: lightblue;
--primary-font: 20px;
}
.theme1 {
width: 100px;
height: 100px;
background: var(--primary-color);
font-size: var(--primary-font);
}
</style>
</head>
<body>
<div class="theme1"></div>
</body>
</html>
使用场景
全局变量
使用:root选择器可以选中根节点,结合CSS变量可以将变量定义在全局,它有最高优先级,所有元素都可以访问这些变量。正如上面的示例
:root {
--primary-color: lightblue;
}
.theme1 {
background: var(--primary-color);
}
局部变量
局部变量(又叫块级变量)的使用范围就比较广了,几乎所有选择器都可以声明变量。下面举几个例子
在类选择器中定义变量,在子标签中使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
.theme1 {
--primary-color: lightblue;
}
.theme1 > span {
color: var(--primary-color);
}
</style>
</head>
<body>
<div class="theme1">
<span>hello</span>
</div>
</body>
</html>
给html设置主题属性,在其他标签中使用。这里我借助JS实现了一个简单的主题切换功能
<!DOCTYPE html>
<html theme="theme1">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
[theme="theme1"] {
--primary-color: lightblue;
--primary-font-size: 20px;
}
[theme="theme2"] {
--primary-color: lightcoral;
--primary-font-size: 30px;
}
.theme > span {
color: var(--primary-color);
font-size: var(--primary-font-size);
}
</style>
</head>
<body>
<button onclick="changeTheme()">切换主题</button>
<div class="theme">
<span>hello</span>
</div>
<script>
const html = document.querySelector("html");
function changeTheme() {
if (html.getAttribute("theme") === "theme1")
return html.setAttribute("theme", "theme2");
html.setAttribute("theme", "theme1");
}
</script>
</body>
</html>
效果如下
媒体查询变量
在媒体查询的条件下,我们也可以通过声明CSS变量来达到样式动态更新的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
@media (min-width: 300px) {
:root {
--primary-color: lightblue;
--primary-font-size: 20px;
}
}
@media (min-width: 600px) {
:root {
--primary-color: lightcoral;
--primary-font-size: 30px;
}
}
.theme > span {
color: var(--primary-color);
font-size: var(--primary-font-size);
}
</style>
</head>
<body>
<div class="theme">
<span>hello</span>
</div>
</body>
</html>
运行上述代码后效果是这样的
动态定义
此外我们可以通过element.setProperty的方式对变量值进行动态修改,称为动态定义,操作如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
:root {
--primary-color: lightblue;
--primary-font-size: 20px;
}
.theme > span {
color: var(--primary-color);
font-size: var(--primary-font-size);
}
</style>
</head>
<body>
<button onclick="changeTheme()">切换主题</button>
<div class="theme">
<span>hello</span>
</div>
<script>
const dom = document.documentElement;
const { style } = dom;
const colorKey = "--primary-color";
function changeTheme() {
const primaryColor = getComputedStyle(dom).getPropertyValue(colorKey);
// 格式化后样式有空格
if (primaryColor.includes("lightblue"))
style.setProperty(colorKey, "lightcoral");
else style.setProperty(colorKey, "lightblue");
}
</script>
</body>
</html>
其中getComputedStyle的作用是动态获取当前标签的样式对象, getPropertyValue可以获取标签的自定义属性,接着使用setProperty来设置自定义属性
** **
继承变量
上面提到的:root根元素声明变量,在任意子元素使用实际上就是继承,父标签定义的变量在后代节点都可以访问
自变量
最后是自变量,在同一个选择器中定义的标签可以在自身中访问
与其他方案的区别
了解了上述用法,那么CSS变量与预处理器以及CSS-in-JS有什么区别呢?
使用方式上
CSS变量属于原生语法可以直接使用;预处理器需要对应的编译器;Css in Js是基于JS实现的将CSS嵌入到JS开发(一般在虚拟Dom中比较常用),同样需要对应依赖。
作用域的区别
CSS变量定义于任何选择器中,以父级为基本单位,后代与其产生继承关系;CSS in JS一般是以框架组件为单位,例如CSS Modules,styled-components;而less,sass等处理器使用的是组件或文件级别的作用域。
编译产物
CSS变量是实时运算的;CSS in JS是编译成CSS后嵌入HTML;预处理器是编译成CSS直接使用。
功能及拓展
CSS变量可以定义简单的变量拓展,或者配合CSS函数(calc,min,clamp等)进行运算;CSS in JS则可以使用完整的JavaScript功能;预处理器除了有变量功能,还可以使用复杂功能,如导入,混合,嵌套等
总结
CSS变量适用于定义可重用的样式,无需使用其他依赖,方便快捷,但是功能少;
CSS in JS适用于组件化样式管理,拥有JS语法支持,需要安装依赖,功能比较强大;
CSS预处理器是用于对CSS功能的拓展,同样需要加载依赖,功能也比较强大
它们三者可以相辅相成,配合使用
写在最后
本文主要带大家了解了一下CSS变量的概念及使用场景,并拓展了其与CSS-in-JS及CSS预处理器的区别,CSS变量适用于定义可重用的样式,可以应对简单的场景。
以上就是文章全部内容了,希望你阅读完有所收获,如果觉得文章不错的话,还望支持一下作者,感谢!
版权归原作者 阿宇的编程之旅 所有, 如有侵权,请联系我们删除。