CSS变量实践

我有一颗地球仪
502 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情

css变量

CSS中的变量是一个有用的和强大的功能，它能让我们的开发更容易、维护更快、定制化更简单。

兼容

使用caniuse.com看看兼容性。

image.png

可以看到兼容性还是不错的，毕竟现在已经没有IE了。

开始定义 CSS 变量

CSS 变量是名称以两个破折号开头的任何属性。

.test {
    color: #1f1ff1;
    --color: blue;
}

变量具有范围

CSS 变量可分为全局变量(global) 和局部变量(local)

global

:root 将定义最高级别根元素，用于全局范围，它与 scss 等预处理器不同，使用的时候需要用 var()

:root {
    --primary-color: #1f1ff1;
}

/*使用*/
.test {
    color: var(--primary-color)
}

local

局部变量

.test {
    --local-primary-color: #1f1f1f;
}

.test.testA {
    color: var(--local-primary-color)
}

.test .child {
    color: var(--local-primary-color)
}

变量可以设置默认值

很简单，第二个参数就是这个变量的默认值，没有定义的时候使用

.test {
    background-color: var(--color, blue);
}

例子一：使用 CSS 创建组件差异变量

有两个或者很多个基本风格相同，边框与背景颜色不同的按钮。

chrome-capture-2022-7-5.gif

<button class="btn">默认</button>
<button class="btn red">红色</button>

如果不知道变量，你可能会这样写：

.btn {
    background: transparent;
    border: 2px solid black;
}

.btn:hover {
    cursor: pointer;
    background: black;
    color: white;
}

.btn.red {
    border-color: red;
}
.btn.red:hover {
    background: red;
}

看起来效果还不错，但是如果现在需要 绿色、蓝色、...，是不是每次都要复制这段代码去修改

.btn.green {
    border-color: green;
}
.btn.green:hover {
    background: green;
}

.btn.blue {
    border-color: blue;
}
.btn.blue:hover {
    background: blue;
}
/* 
...
*/

更好的方式

我们可以用 CSS 变量替换不同的颜色，添加一个变量的默认值，比如只有 btn，那它的 hover 效果就是 black

那么，你只需要在每个类提供一个变量就行了

<button class="btn">默认</button>
<button class="btn red">红色</button>
<button class="btn green">绿色</button>
<button class="btn blue">蓝色</button>

.btn {
    background: transparent;
    border-radius: 2px;
    border: 2px solid var(--color, #1f1f1f);
}

.btn:hover {
    cursor: pointer;
    background: var(--color, #1f1f1f);
    color: white;
}

.btn.red {
    --color: red;
}
/* 再多也不怕 */
.btn.green {
    --color: green;
}
.btn.blue {
    --color: blue;
}
.btn.yellow {
    --color: yellow;
}

可以对比一下，能看出来区别还是很大的。

例子二：网站主题

现在基本很多网站都会有这种修改主题的操作了，比如在黑暗环境下，我们想切换暗黑模式，对眼睛会友好一点，而在平时，我们希望是光亮模式阅读文章等等。

chrome-capture-2022-7-5 (1).gif

思路：通过 JavaScript 更新 CSS样式，来达到效果，当点击按钮上的颜色，设置一个或者多个全局的 CSS 变量，然后使用了这些变量的元素会自动更新主题色。

<div class="btns">
   <button value="dark">暗黑模式</button>
   <button value="light">明亮模式</button>
   <button value="cyan">自定义颜色cyan</button>
</div>
<div class="theme-text">test code</div>

使用变量，并且设置默认值，默认全局是白底黑字的主题。

body {
    background-color: var(--bg, white);
    color: var(--bg-text, black);
}

CSSStyleDeclaration.setProperty() 方法接口为一个声明了 CSS 样式的对象设置一个新的值。

root.style.setProperty('--bg', 'black')
// <html style="--bg:black">

现在知道了吧，我们在上面使用了这个变量，那么我们就可以点击按钮，获取按钮的 value 值，设置变量，也就实现了主题色的切换。

const root = document.documentElement
const oBtns = document.querySelectorAll('.btns > button')

const handleThemeUpdate = (e) => {
    switch (e.target.value) {
        case 'dark':
            root.style.setProperty('--bg', 'black')
            root.style.setProperty('--bg-text', 'white')
            break
        case 'light':
            root.style.setProperty('--bg', 'white')
            root.style.setProperty('--bg-text', 'black')
            break
        case 'cyan':
            root.style.setProperty('--bg', 'cyan')
            root.style.setProperty('--bg-text', 'white')
            break
    }
}

oBtns.forEach(btn => {
    btn.addEventListener('click', handleThemeUpdate)
})

灵活使用 CSS 变量，不仅能够提高我们开发效率，也能够提高代码的可阅读性和维护性。

avatar
文章
阅读
粉丝