学习CSS Variable(CSS变量)以及实现JS与CSS变量交互

浏览器支持情况

请看浏览器支持状况,就目前国内而言,移动混合开发、微信开发,都支持CSS变量。PC端不可考虑。

基本用法

全局用法

这是全局作用域的css变量以及用法:

:root {
    --main-color: #f40;
    --block-font-size: 10px;
}

.aaa {
    color: var(--main-color);
}

任何地方想使用变量,只需要var()这个变量即可。

局部用法

这是局部作用域的css变量以及用法:

<style>
.a {
  --main-color: #f40;
  --block-font-size: 10px;
}

.aaa {
    color: var(--main-color);
}
</style>
</head>
<body>
    <div class="a">
        <p class="aaa">否定伪类选择符 E:not(s)</p>
    </div>

</body>

也就是说,变量可以像普通声明一样写在某个类(或其他任何选择器)里,就可以影响所有后代选择器。

变量名规定

css变量名跟js的变量名比起来宽松得多,比如可以使用数字作为变量名,但是一些IDE会有警告。所以,为了不引起歧义,还是尽量使用严苛的变量名起名法则,可以使用驼峰或者短横线写法,最后,别忘了前面加两个-

变量值规定

一句话,凡是css合法值,都可以作为变量值,并不限于单个值,比如20px 20px 20px是合法的。

调用规定

必须按照语法var( <自定义变量名> [, <默认值 ]? )来写,可以是var(--aa)也可以是var(--aa, 20px 20px),逗号后面的值就是默认值,当变量名不存在的时候,默认值生效。

可以连续使用var拼接成一个css属性值:margin: var(--aa) var(--bb);

下面这个例子中,没有bb这个变量,但是后面的默认值本身又带有逗号,这种写法是否合法呢?

.aaa {
    color: rgb(var(--bb, 255, 255, 255));
}

是合法的,也就是说,浏览器会把第一个逗号之后的内容一概当做默认值。

当变量值书写错误,那么就算引用变量的时候默认值纠正正确,也无济于事,会出错。比如:

body {
  --color: 20px;
  background-color: #369;
  background-color: var(--color, #cd0000);
}

background-color是不可能值为20px的,那么你用#cd0000纠正也没有用,此时background-color会等于默认值rgba(0, 0, 0, 0),也就是透明。所以,千万别写错。

变量引用

一个变量比如--aa,可以被--bb引用:

body {
  --aa: 3px;
  --bb: var(--aa);
}

结合calc计算

一句话说,该怎么写就怎么写,变量值的变化会引起重新计算。

变量重新赋值

就像js变量一样,css变量可以重新赋值,这种重新赋值跟书写顺序相关,也跟js一样。比如:

<style>
.a {
  --mar: 20px 20px;
}

.b {
    margin: var(--mar);
}

.c {
    --mar: 40px 40px;
}

.d {
    margin: var(--mar);
}
</style>
</head>
<body>
    <div class="a">
        <div class="b">
            <div class="c">
                <div class="d"></div>
            </div>
        </div>
    </div>
</body>

这里.d的margin就不是20px 20px。

需要强调的是,变量重新赋值会导致依赖它的其他变量的值也会改变,这跟js是一致的。比如:

.box {
    --columns: 4;
    --margins: calc(24px / var(--columns));
    --space: calc(4px * var(--columns));
    --fontSize: calc(20px - 4 / var(--columns));
}
@media screen and (max-width: 1200px) {
    .box {
        --columns: 3;
    }
}
@media screen and (max-width: 900px) {
    .box {
        --columns: 2;
    }
}
@media screen and (max-width: 600px) {
    .box {
        --columns: 1;
    }
}

当浏览器宽度有变化的时候,--columns会变化,连带--margins、--space、--fontSize会一起发生变化,所以只需要改变--columns就可以了。

js向css传值

js给css变量传值的办法是使用el.style.setProperty()方法,比如:

    <style>
    .b {
        color: var(--theme-color);
    }
    </style>
    <div class="a">a
        <div class="b">b
            <div class="c">c
                <div class="d">d</div>
            </div>
        </div>
    </div>
    <script>
    const aEl = document.querySelector('.a');
    aEl.style.setProperty('--theme-color', 'red');
    </script>

给a元素设置变量,会影响自身和所有后代元素,但是如果.a自身并没有写color: var(--theme-color);,那么就可以做到只影响后代元素,不影响自身。

如果想给自身和后代元素设置默认值(即blue),可以写一条:

.a {
  --theme-color: blue;
}

js读取css变量

读取办法是使用window.getComputedStyle(el).getPropertyValue('--theme-color')方法。比如:

    <style>
.a {
  --theme-color: blue;
}
    .b {
        color: var(--theme-color);
    }
    </style>
    <div class="a">a
        <div class="b">b
            <div class="c">c
                <div class="d">d</div>
            </div>
        </div>
    </div>
    <script>
    const el = document.querySelector('.a');
    const themeColor = window.getComputedStyle(el).getPropertyValue('--theme-color');
    console.log(themeColor); // blue
    </script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249