css变量命名规则（说一说CSS中的变量）

时间2025-05-21 00:15:59分类IT科技浏览4506

导读：大家好，我是半夏?，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 ? 加我微信：frontendpicker...

大家好，我是半夏?，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 ? 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！

原文链接 ==>http://sylblog.xin/archives/43

前言

大部分的编程语言，在语言出现的那一刻就支持变量。但是，CSS一开始就不支持原生变量。所以大家开始选择SCSS,LESS等兼容的 CSS 扩展语言。不过庆幸的是CSS目前也已经支持变量。

在JS中变量可以这样生命：

var variable;

在CSS中，变量是以两个-开始的。

div { --divWidth: 100px}

:root { --bk-color: red}

div { --divWidth: 100px}

不同作用域可以出现同样的变量

div { --divWidth: 100px} span { --divWidth: 100px}

变量名区分大小写

:root { --color: blue; --COLOR: red; }

在SCSS中我们是这样定义并使用变量的：

$font-size: 20px div { font-size: $font-size}

在CSS中，提供了var()函数来使用变量，

上边的SCSS就可以转成这样 :root { --font-size: 16px} .div { font-size: var(--font-size)}

注意：请不要使用已有的属性名称作为变量值。也请不要使用var来做属性名称。

下面这个例子是错误的： :root { --fontSize: font-size} .div { var(--fontSize): 16px}

<html lang="en"> .father { font-size: 100px; color: var(--color); } <div class="father" --style="">123123</div>

先上CSS

:root { --color: blue; } div { --color: green; } #child2 { --color: red; } * { color: var(--color); }

使用上面的变量声明，以下元素的颜色是什么？

<p>我是p</p> <div>我是div1 <div id=child1>我是div1的儿子</div> </div> <div id="child2"> 我是div2 <p>我是div2的儿子</p> </div>

第一段将是blue。选择器--color上没有设置直接定义p，因此它继承了值:root

第一个div将是green。这很清楚。div { --color: green;}

第一个div的p将是green,继承自div1.

该div用的child2将不会是绿色的。这将是red，#child2 {--color: red;}

第一个div的p将是red,继承自div2.

修改:root的变量

document.body.style.setProperty(--color, #7F583F); document.body.style.getPropertyValue(--color).trim(); document.body.style.removeProperty(--color);