【CSS】841- 玩转 CSS 变量
前端自习课
共 767字,需浏览 2分钟
·
2021-01-17 16:07
作者:wsafight
https://github.com/wsafight/personBlog/issues/25
如果当年的 CSS 预处理器变量对于初入前端的我来说是开启了新世界的大门,那么 CSS 变量对于我来说无疑就是晴天霹雳。其功能不但可以优雅的处理之前 js 不好处理或不适合的业务需求。更在创造力无穷的前端开发者手中大放异彩。
基础用法
在前端的领域中,标准的实现总是比社区的约定要慢的多,前端框架最喜欢的 $ 被 Sass 变量用掉了。而最常用的 @ 也被 Less 用掉了。官方为了让 CSS 变量也能够在 Sass 及 Less 中使用,无奈只能妥协的使用 --。
<style>
/* 在 body 选择器中声明了两个变量 */
body {
--primary-color: red;
/* 变量名大小写敏感,--primary-color 和 --PRIMARY-COLOR 是两个不同变量 */
--PRIMARY-COLOR: initial;
}
/** 同一个 CSS 变量,可以在多个选择器内声明。优先级高的会替换优先级低的 */
main {
--primary-color: blue;
}
/** 使用 CSS 变量 */
.text-primary {
/* var() 函数用于读取变量。 */
color: var(--primary-color)
}
<style>
<div class="text-primary">reddiv>
<main class="text-primary">bluemain>
<div style='--primary-color: purple" class="text-primary">purple
这里我们可以看到针对同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的"层叠"(cascade)规则是一致的。
由于这个原因,全局的变量通常放在根元素:root
里面,确保任何选择器都可以读取它们。
:root {
--primary-color: #06c;
}
同时, CSS 变量提供了 JavaScript 与 CSS 通信的方法。就是利用 js 操作 css 变量。我们可以使用:
<style>
/* ...和上面 CSS 一致 */
style>
<div class="text-primary">reddiv>
<main id='primary' class="text-primary">bluemain>
<div id="secondary" style='--primary-color: purple" class="text-primary">purple