Gunakan pembolehubah CSS dengan mahir untuk menjadikan projek anda lebih sejuk!

Artikel ini akan membawa anda memahami pembolehubah CSS, memperkenalkan penggunaan pembolehubah CSS dan melihat cara menggunakan pembolehubah CSS dengan mahir untuk menjadikan CSS anda lebih menarik dan projek anda lebih hebat!

Pembolehubah CSS juga dipanggil Atribut tersuai CSS Mengapa perkara ini yang digunakan oleh segelintir orang secara tiba-tiba? Kerana saya telah membina semula tapak web rasmi peribadi saya baru-baru ini, saya tidak tahu mengapa saya tiba-tiba suka menggunakan pembolehubah CSS Mungkin daya tarikannya yang tersembunyi membuatkan saya kagum.

Bercakap tentang sebab pembolehubah digunakan dalam CSS, berikut ialah contoh saya rasa semua orang akan memahaminya dengan pantas.

/* 不使用CSS变量 */
.title {
    background-color: red;
}
.desc {
    background-color: red;
}

/* 使用CSS变量 */
:root {
    --bg-color: red;
}
.title {
    background-color: var(--bg-color);
}
.desc {
    background-color: var(--bg-color);
}

Selepas membaca ini, anda mungkin merasakan bahawa jumlah kod yang menggunakan pembolehubah CSS agak terlalu banyak, tetapi pernahkah anda terfikir bahawa suatu hari nanti abang perancang jahat dan gadis reka bentuk berkata bahawa mereka akan membuat satu fungsi menukar kulit. Mengikut pemikiran biasa, sesetengah pelajar mungkin akan menambah 默认颜色主题 fail CSS yang sepadan mengikut 新颜色主题. Adalah menyusahkan untuk mengekalkan beberapa set warna tema pada masa yang sama setiap kali terdapat keperluan baharu.

Pada masa ini, pembolehubah CSS sangat berguna. Sila nyatakan pelbagai warna yang perlu ditukar dengan wanita reka bentuk terlebih dahulu dan tentukan mereka melalui pembolehubah CSS. , melalui JS Just batch mengendalikan pembolehubah CSS yang ditakrifkan ini. Ini juga merupakan salah satu penyelesaian untuk menukar warna tema Kelebihannya ialah anda hanya perlu menulis satu set kod CSS.

["red", "blue", "green"].forEach(v => {
    const btn = document.getElementById(`${v}-theme-btn`);
    btn.addEventListener("click", () => document.body.style.setProperty("--bg-color", v));
});

Berikut ialah ringkasan faedah menggunakan pembolehubah dalam CSS:

<li>Kurangkan pertindihan kod gaya <li>Tingkatkan skalabiliti kod gaya <li>Tingkatkan fleksibiliti kod gaya <li>Tambah kaedah komunikasi antara CSS dan JS <li>Tidak perlu merentasi DOM secara mendalam untuk menukar gaya tertentu

Sesetengah pelajar mungkin berpendapat begitu Soalan, Sass dan Less telah pun melaksanakan ciri pembolehubah, jadi mengapa perlu bersusah payah dengannya? Tetapi jika anda memikirkannya dengan teliti, Pembolehubah CSS mempunyai kelebihannya berbanding pembolehubah Sass dan Less.

<li>Ciri asli penyemak imbas boleh dijalankan terus tanpa sebarang terjemahan <li>Ahli objek DOM, yang sangat memudahkan sambungan antara CSS dan JS

Pemahaman

Saya pada asalnya merancang untuk menggunakan separuh daripada artikel untuk menerangkan spesifikasi dan penggunaan pembolehubah CSS, tetapi selepas mencari banyak di Internet, saya rasa ia tidak perlu, jadi saya menyiarkannya Tutorial "Tutorial Pembolehubah CSS" yang ditulis oleh cikgu Ruan Yifeng. Pada masa yang sama, penulis juga menyusun butiran pembolehubah CSS untuk memudahkan semua orang mengingati.

<li> Pengisytiharan: --变量名 <li> Baca: var(--变量名, 默认值) <li>Jenis
<li>Biasa: Hanya boleh digunakan 属性值 Tidak boleh digunakan Gunakan 属性名 <li> aksara: gabungkan dengan rentetan "Hello, "var(--name) <li> nilai: gunakan calc() dengan unit berangka var(--width) * 10px
<li> Skop
<li> Skop: Sah di bawah 当前元素块作用域 dan 子元素块作用域 <li> Keutamaan: 内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

Seterusnya Gunakan beberapa adegan khas untuk menunjukkan daya tarikan pembolehubah CSS. Sekali lagi, jika sesuatu mempunyai senario penggunaan, ia secara semula jadi mempunyai nilai, dan semakin ramai orang akan menggunakannya.

Senario Penggunaan

Malah, pembolehubah CSS mempunyai senario yang sangat berguna, iaitu menggunakannya bersama-sama dengan koleksi elemen Senarai. Jika anda tidak tahu apa ini, sila baca.

以下所有演示代码基于vue文件，但HTML、CSS和JS分开书写，为了简化CSS的书写而使用Sass进行预处理，方便代码演示

Bar pemuatan bar

Bar pemuatan bar biasanya terdiri daripada beberapa baris dan setiap baris sepadan dengan kewujudan Animasi yang sama dengan kelewatan yang berbeza menjalankan animasi yang sama melalui perbezaan masa untuk menghasilkan kesan pemuatan. Dianggarkan bahawa kebanyakan pelajar boleh menulis kod CSS seperti berikut.

<ul class="strip-loading flex-ct-x">
    <li v-for="v in 6" :key="v"></li>
</ul>

.loading {
    width: 200px;
    height: 200px;
    li {
        border-radius: 3px;
        width: 6px;
        height: 30px;
        background-color: #f66;
        animation: beat 1s ease-in-out infinite;
        & + li {
            margin-left: 5px;
        }
        &:nth-child(2) {
            animation-delay: 200ms;
        }
        &:nth-child(3) {
            animation-delay: 400ms;
        }
        &:nth-child(4) {
            animation-delay: 600ms;
        }
        &:nth-child(5) {
            animation-delay: 800ms;
        }
        &:nth-child(6) {
            animation-delay: 1s;
        }
    }
}

Analisis kod mendapati setiap <li> hanya berbeza dalam animation-delay, manakala selebihnya kod adalah sama, digantikan dengan Senarai lain yang serupa Dalam adegan pengumpulan elemen, jika terdapat 10 <li>, kemudian tulis 10 :nth-child.

Jelas sekali kaedah ini tidak fleksibel dan tidak mudah untuk dirangkumkan ke dalam komponen. Ia akan menjadi lebih baik jika ia boleh dikapsulkan ke dalam fungsi seperti JS dan mengeluarkan kesan gaya yang berbeza mengikut parameter. Setelah berkata demikian, ia jelas sekali untuk membuka jalan bagi kemahiran pembangunan pembolehubah CSS.

Untuk pengubahsuaian bahagian HTML, biarkan setiap <li> mempunyai pembolehubah CSS dalam skopnya sendiri. Untuk pengubahsuaian bahagian CSS, anda perlu menganalisis atribut yang berubah secara kerap apabila index meningkat. Gunakan ungkapan pembolehubah CSS untuk menggantikan bahagian yang kerap berubah.

<ul class="strip-loading flex-ct-x">
    <li v-for="v in 6" :key="v" :style="`--line-index: ${v}`"></li>
</ul>

.strip-loading {
    width: 200px;
    height: 200px;
    li {
        --time: calc((var(--line-index) - 1) * 200ms);
        border-radius: 3px;
        width: 6px;
        height: 30px;
        background-color: #f66;
        animation: beat 1.5s ease-in-out var(--time) infinite;
        & + li {
            margin-left: 5px;
        }
    }
}

代码中的变量--line-index和--time使每个<li>拥有一个属于自己的作用域。例如第2个<li>，--line-index的值为2，--time的计算值为200ms，换成第3个<li>后这两个值又会不同了。

这就是CSS变量的作用范围所致(在当前元素块作用域及其子元素块作用域下有效)，因此在.strip-loading的块作用域下调用--line-index是无效的。

/* flex属性无效 */
.loading {
    display: flex;
    align-items: center;
    flex: var(--line-index);
}

通过妙用CSS变量，也把CSS代码从29行缩减到15行，对于那些含有List元素集合越多的场景，效果就更明显。而且这样写也更加美观更加容易维护，某天说加载效果的时间差不明显，直接将calc((var(--line-index) - 1) * 200ms)里的200ms调整成400ms即可。就无需对每个:nth-child(n)进行修改了。

心形加载条

前段时间刷掘金看到陈大鱼头兄的心形加载条，觉得挺漂亮的，很带感觉。

通过动图分析，发现每条线条的背景色和动画时延不一致，另外动画运行时的高度也不一致。细心的你可能还会发现，第1条和第9条的高度一致，第2条和第8条的高度一致，依次类推，得到高度变换相同类的公式：对称index = 总数 + 1 - index。

背景色使用了滤镜的色相旋转hue-rotate函数，目的是为了使颜色过渡得更加自然；动画时延的设置和上面条形加载条的设置一致。下面就用CSS变量根据看到的动图实现一番。

<div class="heart-loading flex-ct-x">
    <ul style="--line-count: 9;">
        <li v-for="v in 9" :key="v" :class="`line-${v}`" :style="`--line-index: ${v}`"></li>
    </ul>
</div>

.heart-loading {
    width: 200px;
    height: 200px;
    ul {
        display: flex;
        justify-content: space-between;
        width: 150px;
        height: 10px;
    }
    li {
        --Θ: calc(var(--line-index) / var(--line-count) * .5turn);
        --time: calc((var(--line-index) - 1) * 40ms);
        border-radius: 5px;
        width: 10px;
        height: 10px;
        background-color: #3c9;
        filter: hue-rotate(var(--Θ));
        animation-duration: 1s;
        animation-delay: var(--time);
        animation-iteration-count: infinite;
    }
    .line-1,
    .line-9 {
        animation-name: line-move-1;
    }
    .line-2,
    .line-8 {
        animation-name: line-move-2;
    }
    .line-3,
    .line-7 {
        animation-name: line-move-3;
    }
    .line-4,
    .line-6 {
        animation-name: line-move-4;
    }
    .line-5 {
        animation-name: line-move-5;
    }
}

一波操作后就有了下面的效果。和陈大鱼头兄的心形加载条对比一下，颜色、波动曲线和跳动频率有点不一样，在暖色调的蔓延和肾上腺素的飙升下，这是一种心动的感觉。想起自己曾经写的一首诗：我见犹怜，爱不释手，雅俗共赏，君子好逑。

标签导航栏

上面通过两个加载条演示了CSS变量在CSS中的运用以及一些妙用技巧，现在通过标签导航栏演示CSS变量在JS中的运用。

JS中主要有3个操作CSS变量的API，看上去简单易记，分别如下：

<li>读取变量：elem.style.getPropertyValue() <li>设置变量：elem.style.setProperty() <li>删除变量：elem.style.removeProperty()

先上效果图，效果中主要是使用CSS变量标记每个Tab的背景色和切换Tab的显示状态。

<div class="tab-navbar">
    <nav>
        <a v-for="(v, i) in list" :key="v" :class="{ active: index === i }" @click="select(i)">标题{{i + 1}}</a>
    </nav>
    <div>
        <ul ref="tabs" :style="`--tab-count: ${list.length}`">
            <li v-for="(v, i) in list" :key="v" :style="`--bg-color: ${v}`">内容{{i + 1}}</li>
        </ul>
    </div>
</div>

.tab-navbar {
    display: flex;
    overflow: hidden;
    flex-direction: column-reverse;
    border-radius: 10px;
    width: 300px;
    height: 400px;
    nav {
        display: flex;
        height: 40px;
        background-color: #f0f0f0;
        line-height: 40px;
        text-align: center;
        a {
            flex: 1;
            cursor: pointer;
            transition: all 300ms;
            &.active {
                background-color: #66f;
                font-weight: bold;
                color: #fff;
            }
        }
    }
    div {
        flex: 1;
        ul {
            --tab-index: 0;
            --tab-width: calc(var(--tab-count) * 100%);
            --tab-move: calc(var(--tab-index) / var(--tab-count) * -100%);
            display: flex;
            flex-wrap: nowrap;
            width: var(--tab-width);
            height: 100%;
            transform: translate3d(var(--tab-move), 0, 0);
            transition: all 300ms;
        }
        li {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
            background-color: var(--bg-color);
            font-weight: bold;
            font-size: 20px;
            color: #fff;
        }
    }
}

export default {
    data() {
        return {
            index: 0,
            list: ["#f66", "#09f", "#3c9"]
        };
    },
    methods: {
        select(i) {
            this.index = i;
            this.$refs.tabs.style.setProperty("--tab-index", i);
        }
    }
};

在<ul></ul>上定义--tab-index表示Tab当前的索引，当点击按钮时重置--tab-index的值，就可实现不操作DOM来移动<ul></ul>的位置显示指定的Tab。不操作DOM而可移动<ul></ul>是因为定义了--tab-move，通过calc()计算--tab-index与--tab-move的关系，从而操控transform: translate3d()来移动<ul></ul>。

另外在<li>上定义--bg-color表示Tab的背景色，也是一种比较简洁的模板赋值方式，总比写<li :style="backgroundColor: ${color}">要好看。如果多个CSS属性依赖一个变量赋值，那么使用CSS变量赋值到style上就更方便了，那些CSS属性可在CSS文件里进行计算与赋值，这样可帮助JS分担一些属性计算工作。

当然，这个标签导航栏也可通过纯CSS实现，有兴趣的同学可看看笔者之前一篇文章里的纯CSS标签导航栏。

悬浮跟踪按钮

通过几个栗子实践了CSS变量在CSS和JS上的运用，相信大家已经掌握了其用法和技巧。之前在某个网站看过一个比较酷炫的鼠标悬浮特效，好像也是使用CSS变量实现的。笔者凭着记忆也使用CSS变量实现一番。

其实思路也比较简单，先对按钮进行布局和着色，然后使用伪元素标记鼠标的位置，定义--x和--y表示伪元素在按钮里的坐标，通过JS获取鼠标在按钮上的offsetLeft和offsetLeft分别赋值给--x和--y，再对伪元素添加径向渐变的背景色，大功告成，一个酷炫的鼠标悬浮跟踪特效就这样诞生了。

<a class="track-btn pr tac" @mousemove="move">
    <span>妙用CSS变量，让你的CSS变得更心动</span>
</a>

.track-btn {
    display: block;
    overflow: hidden;
    border-radius: 100px;
    width: 400px;
    height: 50px;
    background-color: #66f;
    line-height: 50px;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    span {
        position: relative;
    }
    &::before {
        --size: 0;
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: var(--size);
        height: var(--size);
        background-image: radial-gradient(circle closest-side, #09f, transparent);
        content: "";
        transform: translate3d(-50%, -50%, 0);
        transition: all 200ms ease;
    }
    &:hover::before {
        --size: 400px;
    }
}

export default {
    name: "track-btn",
    methods: {
        move(e) {
            const x = e.pageX - e.target.offsetLeft;
            const y = e.pageY - e.target.offsetTop;
            e.target.style.setProperty("--x", `${x}px`);
            e.target.style.setProperty("--y", `${y}px`);
        }
    }
};

其实可结合鼠标事件来完成更多的酷炫效果，例如动画关联、事件响应等操作。没有做不到，只有想不到，尽情发挥你的想象力啦。

之前在CodePen上还看到一个挺不错的栗子，一个悬浮视差按钮，具体代码涉及到一些3D变换的知识。看完源码后，按照其思路自己也实现一番，顺便对代码稍加改良并封装成Vue组件，存放到本课件示例代码中。感觉录制的GIF有点别扭，显示效果不太好，有兴趣的同学可下载本课件示例代码，自己运行看看效果。

兼容

对于现代浏览器来说，CSS变量的兼容性其实还是蛮好的，所以大家可放心使用。毕竟现在都是各大浏览器厂商快速迭代的时刻，产品对于用户体验来说是占了很大比重，因此在条件允许的情况下还是大胆尝新，不要被一些过去的所谓的规范所约束着。

试问现在还有多少人愿意去维护IE6~IE9的兼容性，如果一个产品的用户体验受限于远古浏览器的压制(可能政务Web应用和金融Web应用除外吧)，相信这个产品也不会走得很远。

我们在完成一个产品的过程中，不仅仅是为了完成工作任务，如果在保证进度的同时能花点心思点缀一下，可能会有意外的收获。用心写好每一段代码，才是享受写代码的真谛。

总结

本文通过循序渐进的方式探讨了CSS变量的运用和技巧，对于一个这么好用的特性，当然是不能放过啦。其实多多思考，就能把CSS变量用在很多场景上。

更多编程相关知识，请访问：编程入门！！

Atas ialah kandungan terperinci Gunakan pembolehubah CSS dengan mahir untuk menjadikan projek anda lebih sejuk!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!