登录  /  注册
首页 > web前端 > css教程 > 正文

声明你的第一个css变量

王林
发布: 2021-01-13 11:27:02
转载
1379人浏览过

声明你的第一个css变量

刚开始的“css变量”,经扩展之后,称为“css自定义属性”。当各种预处理器满天飞的时候,css变量已经开始渐渐普及在特定的应用场景,css变量确实发挥了很大的作用。

(学习视频分享:css视频教程

此外,与一些 CSS 预处理器不同的是,CSS 变量实际上是 DOM 的一部分,这对于开发有极大的好处。

为什么学习 CSS 变量?

关于为什么在 CSS 中使用变量有很多理由,其中最主要的一点就是它减少了样式代码的重复。

}IXFSE)QS(P_RCD}6_7_(HL.png

以这段代码为例,像我们下面这样为 #ffeead 颜色创建一个变量会比机械地重复它好得多:

F(2`6J)_XGXU~J)6PXC~PFB.png

这样一来你的代码不仅仅是变得更加可读,而且也为你将来想要做出改变提供了更多的灵活性。

虽然这一功能 SASS 和 LESS 早在几年前就实现了,但 CSS 变量还是有很多亮点:

它不需要经过任何转译步骤,因为它是浏览器原生支持的。所以你不需要像使用 SASS 和 LESS 那样,你不需要任何设置就能直接书写这样的代码。

它是 DOM 的一部分,这给我们带来了极大的便利,这一点我后面会在文章中进行阐述。

那么我们开始吧!

声明你的第一个 CSS 变量

在声明一个变量之前,首先你要确定这个变量的作用域在哪,如果你想让它在全局生效,只需在:root伪类中定义它即可。它会匹配文档的根元素(通常是标签)。

由于变量是可继承的,所以你的整个 HTML 结构树都能使用这个变量,因为所有的 DOM 元素都是 节点的后代。

:root {
  --main-color: #ff6f69;
}
登录后复制

你可以像设置任何CSS属性一样声明一个变量。 但不同的是,变量必须以两个破折号开头。

而要获取到这个变量的值,需要使用 var() 函数,并将变量的名称作为参数传入。

#title {
  color: var(--main-color);
}
登录后复制

你的标题将被赋值 #ff6f69 的颜色。

1X5~NN94P(J5CB]{0X4V)NY.png

声明一个局部变量

你也可以创建局部变量,局部变量只能够被声明的元素及其子元素访问。一般当你想要仅在页面的某些特定部分使用这个变量时声明。

例如,假设你的页面中有个警告框,你想给它赋值一个特殊的颜色,而这个颜色在页面的其他部分又没有应用到。那么在这种情况下,就应该避免创建全局变量,使用局部变量就更为合理。

.alert {
  --alert-color: #ff6f69;
}
登录后复制

现在在其子元素中就能够使用这个变量了:

.alert p {
  color: var(--alert-color);
  border: 1px solid var(--alert-color);
}
登录后复制

如果你尝试在页面其他位置使用变量 alert-color,是无效的,浏览器会忽略那一行 CSS 代码。

通过 CSS 变量更容易地实现响应式布局

CSS 变量的一大优势是它们可以访问 DOM ,这是 LESS 或 SASS 的变量所做不到的,因为它们会被编译为常规的 CSS 。

这意味着你可以根据屏幕的宽度来改变变量的值:

:root {
  --main-font-size: 16px;
}
media all and (max-width: 600px) {
  :root {
    --main-font-size: 12px;
  }
}
登录后复制

仅仅通过这简单的四行代码,你就能改变你的应用在小屏幕上所显示的主字体大小,骚操作?

JavaScript 如何访问 CSS 变量

与 DOM 相结合的另一大优势是你可以通过 JavaScript访问到变量,甚至可以更新变量的值,例如基于交互的样式改变。如果你想让用户能够更改你的网站的样式(如调整字体大小),这将会是一个非常完美的解决方案。

让我们继续刚刚的例子,在 JavaScript 中获取 CSS 变量的值只需要三行代码。

var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var mainColor = rootStyles.getPropertyValue('--main-color');
console.log(mainColor);  --> '#ffeead'
登录后复制

要更新 CSS 变量,只需在已声明变量的元素上调用 setProperty 方法,并将变量名称作为第一个参数,将新值作为第二个参数传入。

root.style.setProperty('--main-color', '#88d8b0')
登录后复制

main-color 属性会改变你的页面的整体外观,这让用户自定义网站的主题色变得极其简单。

浏览器支持

目前,全球网站流量的 77% 支持CSS变量,而美国已经接近90%。我们已经在 Scrimba.com 上使用 CSS 变量,因为我们的客户大多使用现代浏览器。

5K(KYL2W1_5@]9`W3@XXKOL.png

以上就是 CSS 变量的大概,希望你能有所收获。

相关推荐:CSS教程

以上就是声明你的第一个css变量的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:掘金网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号