CSS变量:作用域

2020年12月30日11:09:34 发表评论 42 次浏览

本文概述

我们可以在CSS中声明变量的方式与在其他编程语言中声明变量的方式相同。

我们在CSS中声明一个分配了值的变量。然后可以在CSS规则集中使用该变量。

例如, 在JavaScript中, 我们使用让, 变种和const关键字:

let nine = 9;
var ten = 10;
var eight = 8;

然后, 通过引用它们的变量名来使用它们:

>> nine
9
>>  ten
10
>> eight 
8

我们也可以在CSS中执行此操作。要在CSS中声明变量, 我们使用以下格式:

--varName

在CSS中, 外观如下:

body {
    --mainColor: limegreen;
}

假设我们声明了一个名称为--mainColor和值为柠檬绿。此变量保存一个颜色名称。

为了使用CSS中的变量, 我们使用var():

var(--varName);

变种将检索传递给它的变量的值, 并将其自身替换为值:

body {
    --mainColor: limegreen;
}

div {
    color: var(--mainColor);
}

这里, div消耗主色使用变种功能。的变种将获取值柠檬绿从--mainColor并用柠檬绿, 的价值--mainColor变量。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

CSS变量:作用域1

因此, 文本节点中的颜色div元素将为石灰绿色。换句话说, CSS代码将转换为:

body {
    --mainColor: limegreen;
}

div {
    color: limegreen;
}

范围界定

在CSS层次结构中声明CSS变量的位置将确定其在较低层次结构中的可见性级别。

在整个页面中使用的CSS变量在::根伪选择器, 或html选择器。

这是因为我们页面上的所有元素都包含在一个HTML元素中, 所以在HTML元素或其HTML元素中声明的CSS变量::根选择器将可见, 可供其子代使用。

::根是附加到文档中HTML元素根目录的伪选择器。在RSS文档中, ::根元素附加到RSS元素。

通常, CSS变量仅对声明其的父元素的子元素可见。

现在, 我们有了这个:

<body>
    <div>Div 1</div>
    <div>Div 2</div>
</body>

的身体元素是其子元素的父元素div, 第1分部和2区.

因此这是可行的:

body {
    --bgColor: limegreen;
}

div {
    background: var(--bgColor);
}

CSS变量bgColor在body元素中声明并在div将div元素的背景设置为石灰绿色。

这对于我们的两个div元素将是可见的, 因为它们是body元素的子元素, 而body元素是声明其消耗的CSS变量的位置。

现在, 如果情况相反:

body {
    background: var(--bgColor);
}

div {
    --bgColor: limegreen;
}

<body>
    <div>Div 1</div>
    <div>Div 2</div>
</body>

的--bgColor变量在div元素中声明, 并在body元素中使用。现在, body元素位于div元素上方, 因此--bgColor变量对body元素不可见。因此, body元素的背景不会变成灰绿色。

的--bgColor在这种情况下, 变量将对div元素下方的元素可见:

body {
    background: var(--bgColor);
}

div {
    --bgColor: limegreen;
}

p {
    background: var(--bgColor);
}

<body>
    <div>Div 1
        <p>Paragraph 1</p>
    </div>
    <div>Div 2
        <p>Paragraph 2</p>
    </div>
</body>

的--bgColor变量对p元素, 因为它们是div.

我们可以在这里看到CSS变量的可见性取决于父子关系。子元素在其父元素的范围内, 因此它可以在父范围内使用CSS变量声明。

主题设置是通过CSS变量完成的, 并且大多数情况下, 主题设置会传播整个DOM树, 因此CSS变量通常在html元素或::根元件。这是因为没有元素放置在HTML元素之外:

::root {
    --bgColor: lightcoral;
    --mainColor: limegreen;
    --borderColor: seagreen;
}

在极少数情况下, 当我们想为DOM树的一部分作为主题或使用CSS变量作为DOM分支的主题时, 我们会在DOM分支的根元素中设置CSS变量, 以使其在分支树中向下传播。

<html>
    <body>
        <div class="branch">
            <p>
                Paragraph 1
            </p>
        </div>
        <p>
            Paragraph 2
        </p>
    </body>
</html>
```
```css
.branch {
    --brBgColor: palevioletred;
    --brMainColor: blueviolet;
}

p {
    background: var(--brBgColor);
    color: var(--brMainColor);
}

在中声明的CSS变量分支机构将对p元件第1段, 因为它是div带有班级名称科。背景颜色和文字颜色将被绘制泛紫和紫罗兰色颜色分别。

的p元件第2段不会受到样式的影响, 因为CSS变量--brBgColor --brMainColor对它不可见。这是因为它不是分支机构.

因此, 这是在CSS变量中起作用的范围。

全球范围

在中声明的CSS变量::根选择器据说在Global范围内。这意味着可以在CSSOM中的任何位置访问它们。

为什么行得通?

就像我们之前学到的::根选择器附加在文档的根目录。网络文档中的所有元素都在根文档下, 因此CSS变量在::根如果文档将级联到所有级别。另外, 声明的CSS变量对于文档中的所有元素都是可见的。

当地范围

就像在::根选择器, 也可以在CSSOM层次结构的所有级别或特定选择器中声明CSS变量。

现在, 在这些级别或选择器中声明的CSS变量仅对选择器及其子节点可见或局部作用域。

吊装

悬挂CSS变量并将它们移到CSSOM的顶部, 然后在浏览器中呈现相应HTML元素的样式。

就像在JavaScript中一样, 可以悬挂CSS变量。这意味着可以在声明CSS变量之前使用它们。

var num2 = 90

var add = num1 + num2

var num1 = 10

log(add)

在以上示例中, num1在声明变量之前使用它。那意味着num1被吊起。运行代码后, add将记录100。尽管在声明之前首先使用了JavaScript, 但JavaScript仍能够获取值并执行操作。

CSS变量也是如此:

body {
    background-color: var(--bgColor);
}

::root {
    --bgColor: rgb(221, 221, 221);
}

如你所见, CSS变量--bgColor在它被声明之前被使用::根伪选择器。而且代码工作得很好!

因此, 可以先访问CSS变量, 然后再声明。这使CSS变量成为非常强大的功能。

检查支持

尽管主要版本的Chrome和Firefox可能缺少支持, 但主要浏览器都广泛支持CSS变量。目前正在支持IE和Edge中的CSS变量。

由于并非所有浏览器都支持CSS变量, 因此我们可以使用来检测CSS变量功能支持@支持.

@supports(--bgColor: rgb(221, 221, 221)) {

}

第二个选项是设置一个后备值:

::root {
    --primaryColor: blue;
}

button {
    color: var(--primaryColor);
    color: blue;
}

我们成立了--primaryColor在变量::根颜色选择器蓝色。但是, 我们不确定运行CSS的浏览器是否支持CSS变量。为了使代码正常工作, 我们在按钮选择器中添加了一个后备值。这样可以确保该按钮在不支持CSS变量的浏览器中使用我们的原色。

使用CSS变量的优势

主题化

CSS变量作用域改进了我们在CSS中添加和修改主题的方式。使用CSS变量, CSS中的主题将不需要具有不同主题的额外样式表。相反, 你需要做的就是更新CSS变量。

造型

利用CSS Variable范围可以改善样式表的大小, 特异性和语义。

假设我们有一个按钮:

button {
    padding: 10px 5px;
}

使用不同的按钮样式:

.btn-danger {
    background-color: orange;
}

.btn-success {
    background-color: lightblue;
}

使用CSS变量, 我们不必定义背景颜色在每个按钮样式中。

button {
    --btnBgColor: blue;
    padding: 10px 5px;
    background-color: var(--btnBgColor);
}

.btn-danger {
    --btnBgColor: orange;
}

.btn-success {
    --btnBgColor: lightblue;
}

我们只需分配--btnBgColor每个按钮样式的新值。我们不再需要覆盖基本样式。

看到? CSS变量非常强大, 作用域功能使它们成为干净的模块化设计系统的理想工具。

总结

今天, 我们刚刚处理了CSS中的潜在错误。

就像我们在JavaScript和其他语言中进行作用域定义一样, CSS变量也是如此。我们已经看到CSS变量的一种主要应用:主题化。它可以为我们提供更多的服务。

如果你对此有任何疑问, 或者我应该添加, 更正或删除任何内容, 请随时发表评论, 发送电子邮件或给我DM。

你的前端占用了用户的CPU吗?

随着Web前端变得越来越复杂, 资源贪婪功能对浏览器的需求也越来越大。如果你有兴趣监视和跟踪生产中所有用户的客户端CPU使用率, 内存使用率等,

尝试notlogy

.

LogRocket仪表板免费试用横幅

https://notlogy.com/signup/

日志火箭就像Web应用程序的DVR, 它记录了Web应用程序或网站中发生的一切。你不必猜测为什么会发生问题, 而是可以汇总并报告关键的前端性能指标, 重播用户会话以及应用程序状态, 记录网络请求, 并自动发现所有错误。

现代化调试Web应用程序的方式—免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: