标签搜索
隐藏侧边栏

CSS中的变量

搞前端的半夏
2022-04-22 / 0 评论 / 0 点赞 / 82 阅读 / 1,531 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-22,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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

前言

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

定义变量

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

var variable;

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

div { --divWidth: 100px}

变量作用域

全局作用域 :root

: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}

可以继承

可以在@media中进行修改

可以在 HTML 的 style 属性中使用

<html lang="en" style="--color: red;">

.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.

JS操作

修改:root的变量

document.body.style.setProperty('--color', '#7F583F');

document.body.style.getPropertyValue('--color').trim();

document.body.style.removeProperty('--color');

0

评论区