css3中自定义变量

最新推荐文章于 2022-06-04 16:02:04 发布

星月昭铭

最新推荐文章于 2022-06-04 16:02:04 发布

阅读量4.4k

点赞数 1

分类专栏：前端文章标签： css3 css3新特性 css

本文链接：https://blog.csdn.net/weixin_43373239/article/details/101723038

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

使用过Less或者Sass的人都知道，为了方便，可以将css属性值定义为一个变量，这样在其他元素中需要使用的话只需输入变量名就可以了，在css3中支持定制变量。
css3中，定义一个变量需要加前缀“- -”，类似于PHP中的变量需要带一个$。

:root {
	--box-color: red;
}

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示元素，除了优先级更高之外，与 html 选择器相同。

上面在:root中定义了一个–box-color:red 变量，变量- -box-color的值为red
在css3中使用变量需要使用一个var();然后将所需的变量写在var()中,注意，使用变量不能少了- -(两个减号)
格式:

元素 {
属性：var(变量名);
}

现在来使用它

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        :root {
            /*定义一个变量--box-color*/
            --box-color: red;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: var(--box-color);
        }
    </style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

在body里面添加两个宽高皆为100px的div，然后为这两个div设置背景色，注意background-color的属性值。
运行看看
在这里插入图片描述
可以看到，两个div背景色都被设置为了红色
那么问题来了

:root代表html元素，而上面所写的两个div都是html的子类（后代），所以，在:root中的定义的变量我们能使用。如果，我们将变量定义在其他元素的作用域（{}包围的）中，这个变量还能生效吗？
首先修改上面的代码，添加一个div的兄弟元素p,在p中定义一个变量- -bg-color:yellow,并在div中使用这个变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            /*定义一个变量*/
            --bg-color: yellow;
        }

        div {
            /*为了看清，添加一个边框*/
            border: 1px solid blue;
            width: 100px;
            height: 100px;
            background-color: var(--bg-color);
        }
    </style>
</head>
<body>
<p>我是p</p>
<div></div>
<br/>
<div></div>
</body>
</html>

运行
在这里插入图片描述
可以发现，div的背景色并没有被设置为黄色，这是因为，一个元素定义的变量，只能被自己和自己的后代所使用。

在html中定义一个变量 - -bg-color:red; ,在body中定义一个相同的变量 - -bg-color:yellow，那么上面的div会被设置为什么背景色？（提示：css选择器有优先级），这个问题留给你们，自己动手实验实验。

星月昭铭

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
css3中自定义变量

使用过Less或者Sass的人都知道，为了方便，可以将css属性值定义为一个变量，这样在其他元素中需要使用的话只需输入变量名就可以了，不过，没使用了前面两者的，但又想定义变量的人有福了，css3已经支持定制变量。css3中，定义一个变量需要加前缀“- -”，类似于PHP中的变量需要带一个$。:root { --box-color: red;}:root 这个 CSS 伪类匹配文档树的...
复制链接

扫一扫

专栏目录