Utilisez habilement les variables CSS pour rendre votre projet plus cool !

Cet article vous amènera à comprendre les variables CSS, à présenter l'utilisation des variables CSS et à voir comment utiliser habilement les variables CSS pour rendre votre CSS plus excitant et votre projet plus cool !

Les variables CSS sont également appelées Propriétés personnalisées CSS Pourquoi cette chose que peu de gens utilisent est-elle soudainement mentionnée ? Parce que j'ai récemment reconstruit mon site officiel personnel, je ne sais pas pourquoi j'aime soudainement utiliser des Variables CSS. Peut-être que son charme caché me fait le regarder avec admiration.

Parlant de la raison pour laquelle les variables sont utilisées en CSS, voici un exemple, je pense que tout le monde le comprendra en un coup d'œil.

/* 不使用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);
}

Après avoir lu ceci, vous aurez peut-être l'impression que la quantité de code utilisant des variables CSS est un peu trop importante, mais avez-vous déjà pensé qu'un jour, le méchant frère planificateur et la designer girl ont soudainement dit qu'ils voulaient créer un fonction de changement de peau. Selon la pensée habituelle, certains étudiants ajouteront probablement un fichier 默认颜色主题CSS correspondant selon 新颜色主题. Il serait problématique de conserver plusieurs jeux de couleurs de thème en même temps à chaque fois qu'il y a une nouvelle exigence.

C'est à ce moment-là que les variables CSS sont utiles. Vous pouvez spécifier à l'avance les différentes couleurs qui doivent être modifiées avec la designer et les définir via des Variables CSS. Vous pouvez utiliser par lots ces variables CSS définies. JS. C'est également l'une des solutions pour changer les couleurs du thème. L'avantage est qu'il vous suffit d'écrire un ensemble de code CSS.

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

Voici un résumé des avantages de l'utilisation des variables en CSS :

<li>Réduire la duplication du code de style <li>Augmenter l'évolutivité du code de style <li>Améliorer la flexibilité du code de style <li>Ajouter une méthode de communication entre CSS et JS <li>Pas besoin de parcourir profondément le DOM pour changer un certain style

Certains étudiants peuvent se demander, Sass et Less ont déjà implémenté la fonctionnalité variable, alors pourquoi s'en soucier ? Mais si vous y réfléchissez bien, les Variables CSSpar rapport aux variables de Sass et Less, elles ont leurs avantages.

<li>Fonctionnalités natives du navigateur, vous pouvez l'exécuter directement sans aucune traduction <li>Un membre de l'objet DOM, ce qui facilite grandement la connexion entre CSS et JS

Faites connaissance

J'avais initialement prévu d'utiliser la moitié du longueur pour parlerCSS Les spécifications et l'utilisation des variables , mais après de nombreuses recherches sur Internet, j'ai senti que c'était inutile, j'ai posté le tutoriel "Tutoriel sur les variables CSS" écrit par le professeur Ruan Yifeng. Dans le même temps, l'auteur a également organisé les détails des Variables CSS pour que tout le monde puisse s'en souvenir plus facilement.

Déclaration : <li>--变量名 Lire : <li>var(--变量名, 默认值) Type <li>
Normal : Ne peut être utilisé que comme <li> Ne peut pas être utilisé comme 属性值属性名 Caractère : Épissé avec une chaîne <li>"Hello, "var(--name) Valeur : Utiliser <li> en conjonction avec des unités numériques calc()var(--width) * 10px
Portée <li>
Portée : Valable sous <li> et son 当前元素块作用域 子元素块作用域 Niveau de priorité : <li>内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

Ensuite, nous utilisons plusieurs scénarios spéciaux pour montrer le charme des

Variables CSS. Encore une fois, si quelque chose a un scénario d’utilisation, il aura naturellement sa valeur et de plus en plus de personnes l’utiliseront. Scénarios d'utilisation

En fait, les

Variables CSS

ont un scénario particulièrement utile, qui consiste à les utiliser en conjonction avec une collection d'éléments de liste. Si vous ne savez pas ce que c’est, continuez à lire.

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

Barre de chargement de barre

Une barre de chargement de barre est généralement composée de plusieurs lignes, et chaque ligne correspond à la même animation avec des délais différents. La même animation est exécutée à travers la différence de temps pour produire un effet de chargement. . On estime que la plupart des étudiants peuvent écrire du code CSS comme suit.

<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;
        }
    }
}

Après avoir analysé le code, nous avons constaté que chaque n'est différent que dans son existence

, tandis que le reste du code est exactement le même si nous le remplaçons par d'autres scénarios de collecte d'éléments de liste similaires, n'y aurait-il pas. sois 10

écris simplement 10 <li>. animation-delay<li>Évidemment, cette méthode n'est pas flexible et ne peut pas être facilement encapsulée dans des composants. Ce serait encore mieux si elle pouvait être encapsulée dans une fonction comme JS et produire différents effets de style en fonction des paramètres. En parlant de ça, il s'agit évidemment d'ouvrir la voie aux compétences de développement de :nth-childVariables CSS

.

Pour la modification de la partie HTML, laissez chacun avoir une

variable CSS

dans sa propre portée. Pour la modification de la partie CSS, vous devez analyser quels attributs changent régulièrement à mesure que <li> augmente, et remplacer les parties qui changent régulièrement par des expressions Variable CSS. index

<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变量用在很多场景上。

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!