ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS 変数を上手に使って、プロジェクトをさらにクールにしましょう。
CSS 変数を上手に使って、プロジェクトをさらにクールにしましょう。
- 青灯夜游転載
- 2021-07-23 19:13:202426ブラウズ
この記事では、CSS 変数を理解し、CSS 変数の使用法を紹介し、CSS 変数を上手に使用して CSS をより魅力的にし、プロジェクトをよりクールにする方法を説明します。
CSS 変数 は CSS カスタム プロパティ とも呼ばれます。ほとんどの人が使用しないこの機能が突然言及されたのはなぜですか?最近、個人の公式サイトを再構築しているのですが、なぜ急に CSS 変数 を使いたくなったのかわかりませんが、その隠れた魅力に感心して見ているのかもしれません。
CSS でなぜ変数が使われるのかというと、例を挙げれば誰でも一目で理解できると思います。
/* 不使用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);
}これを読んだ後、CSS 変数 を使用するコードの量が少し多すぎると感じるかもしれませんが、ある日、邪悪な計画の兄弟とデザインの女の子が、スキン変更をしたいと言いました? 機能。通常の考え方によれば、一部の生徒はおそらく デフォルト カラー テーマ に従って、対応する 新しいカラー テーマ CSS ファイルを追加するでしょう。新しい要件が発生するたびに、テーマカラーの複数のセットを同時に維持するのは面倒です。
こんな時はCSS変数が便利ですので、事前にデザインレディと変更したい色を指定して、CSS変数で定義しておいてください。 JS 経由 これらの定義済み CSS 変数 をバッチ操作するだけです。これは テーマの色を変更する に対する解決策の 1 つでもあり、一連の CSS コードを記述するだけで済むという利点があります。
["red", "blue", "green"].forEach(v => {
const btn = document.getElementById(`${v}-theme-btn`);
btn.addEventListener("click", () => document.body.style.setProperty("--bg-color", v));
});CSS で変数を使用する利点の概要は次のとおりです。
-
<li>スタイル コードの重複を減らす
<li>スタイル コードのスケーラビリティを向上させる <li> スタイル コードの柔軟性の向上
<li>CSS と JS 間の通信メソッドの追加
<li>特定のスタイルを変更するために DOM を深くトラバースする必要はありません
学生の中には、Sass と Less がすでに機能として変数を実装しているのに、なぜわざわざ変数を実装するのかと疑問に思う人もいるかもしれません。しかし、よく考えてみると、CSS 変数 には、Sass 変数や Less 変数と比較して利点があります。
-
<li>ブラウザのネイティブ機能は、変換せずに直接実行できます
<li>DOM オブジェクトのメンバー。これにより、CSS と JS 間の接続が大幅に容易になります
理解について
当初記事の半分を使って CSS 変数 の仕様と使い方を説明する予定でしたが、インターネットでいろいろ調べてみると、チュートリアル 「CSS 変数チュートリアル」 Ruan Yifeng 先生作成。同時に、作者は誰もが記憶しやすいように CSS 変数 の詳細も整理します。
- #宣言: <li>--変数名
- 属性値としてのみ使用できます<li>
属性名としては使用できませんvar(--width) * 10px と組み合わせて使用します。 - 現在の要素ブロック スコープ<li>とその
子要素ブロック スコープ ##で有効です。 #優先度:インラインスタイル>IDセレクタ>クラスセレクタ=属性セレクタ=擬似クラスセレクタ>タグセレクタ=擬似要素セレクタ
<li>
使用シナリオ実際、CSS 変数
には、List 要素のコレクションと組み合わせて使用するという、特に便利なシナリオがあります。これが何なのか分からない場合は、読み続けてください。以下所有演示代码基于vue文件，但HTML、CSS和JS分开书写，为了简化CSS的书写而使用Sass进行预处理，方便代码演示
バー ローディング バー
バー ローディング バーは通常、複数の行で構成され、各行は異なる時間に対応します。同じアニメーションは次のとおりです。遅延し、同じアニメーションが時間差を介して実行され、ローディング効果が生成されます。ほとんどの学生は次のように CSS コードを作成すると推定されます。
<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;
}
}
}コードを分析した結果、各
<li> には 
animation-delay
があるのではなく、10 :nth-child と記述するだけです。 明らかに、このメソッドは柔軟ではなく、コンポーネントにカプセル化するのが簡単ではありませんが、JS のような関数にカプセル化して、パラメーターに応じてさまざまなスタイルの効果を出力できればさらに良いでしょう。そうは言っても、これは明らかに CSS 変数 の開発スキルへの道を開くためです。 HTML 部分を変更するには、各
<li>
に独自のスコープの下に CSS 変数 を持たせます。 CSS 部分を変更するには、index の増加に応じてどの属性が定期的に変化するかを分析する必要があり、定期的に変化する部分を CSS 変数 式を使用して置き換えます。
<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变量用在很多场景上。
更多编程相关知识，请访问：编程入门！！
以上がCSS 変数を上手に使って、プロジェクトをさらにクールにしましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。