Biar saya membimbing anda langkah demi langkah melalui 5 contoh untuk membiasakan diri dengan pembolehubah CSS!

Adakah anda biasa dengan pembolehubah CSS? Jika anda tidak biasa dengannya, jangan risau! Artikel berikut akan memperkenalkan anda kepada pembolehubah CSS dan menggunakan 5 contoh untuk membiasakan anda dengan pembolehubah CSS Saya harap ia akan membantu anda!

Apabila aplikasi web semakin besar, CSS menjadi lebih besar, lebih bertele-tele dan bersepah. Menggunakan pembolehubah CSS dalam konteks yang baik memberikan kita mekanisme untuk menggunakan semula dan menukar sifat CSS berulang dengan mudah.

Sebelum pembolehubah disokong CSS tulen, kami mempunyai prapemproses seperti Less dan Sass. Tetapi mereka perlu disusun sebelum digunakan, dengan itu (kadang-kadang) menambah lapisan kerumitan tambahan.

Cara untuk mentakrif dan menggunakan pembolehubah CSS (juga dikenali sebagai sifat tersuai)

Untuk mengisytiharkan pembolehubah JS yang mudah, ia sangat mudah, seperti berikut:

let myColor = "green";

Untuk mengisytiharkan pembolehubah CSS, anda mesti menambah dua sempang sebelum nama pembolehubah.

body {
    --english-green-color: #1B4D3E;
}

Kini, untuk menggunakan nilai pembolehubah CSS, kita boleh menggunakan fungsi var(...).

.my-green-component{
    background-color: var(--english-green-color);
}

Cara paling mudah untuk mengurus pembolehubah CSS ialah mengisytiharkannya dalam kelas pseudo :root. Memandangkan pembolehubah CSS mengikut peraturan yang sama seperti takrifan CSS yang lain, meletakkannya dalam :root akan memastikan semua pemilih mempunyai akses kepada pembolehubah ini.

:root{
    --english-green-color: #1B4D3E;
}

Sokongan penyemak imbas untuk pembolehubah CSS

Sokongan penyemak imbas untuk pembolehubah CSS tidaklah buruk sama sekali. Jika anda melihat Bolehkah saya Menggunakan Pembolehubah CSS, anda akan melihat bahawa semua pelayar utama menyokong pembolehubah CSS. Sama ada pada telefon bimbit atau PC.

Sekarang, mari lihat perkara yang sebenarnya dilakukan oleh pembolehubah CSS ini.

Contoh 1 - Mengurus Warna

Salah satu pilihan terbaik untuk menggunakan pembolehubah CSS ialah warna reka bentuk anda. Daripada menyalin dan menampal warna yang sama berulang kali, kita boleh meletakkannya dalam pembolehubah.

Jika mana-mana produk sialan mahu kami mengemas kini warna hijau tertentu atau menjadikan semua butang merah dan bukannya biru, kami hanya boleh menukar nilai pembolehubah CSS itu. Kami tidak perlu mencari dan menggantikan semua kemunculan warna itu.

Cuba sendiri: https://codesandbox.io/s/8kkyl4mlm9?from-embed

Contoh 2 - Padam Kod Pendua

Selalunya kita perlu membina variasi berbeza bagi sesetengah komponen. Gaya asas yang sama, cuma fungsi yang berbeza sedikit. Mari kita gunakan contoh dengan butang warna yang berbeza.

.btn {
  border: 2px solid black;
  // more props here
}

.btn:hover {
  background: black;
  // more props here
}

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

Gunakannya seperti ini:

<button class="btn">Hello</button>
<button class="btn red">Hello</button>

Walau bagaimanapun, ini akan menambah beberapa pertindihan kod. Dalam kelas .red kita perlu menetapkan kedua-dua warna sempadan dan latar belakang kepada merah. Jika anda perlu menukar warna satu hari, ia akan menjadi sangat menyusahkan dan anda perlu menukarnya satu demi satu. Masalah ini boleh diselesaikan dengan mudah dengan pembolehubah CSS.

.btn {
    border: 2px solid var(--color, black);
}
.btn:hover {
    background: var(--color, black);
}
.btn.red {
    --color: red
}

Cuba sendiri: https://codesandbox.io/s/yp29qoyvyx?from-embed=&file=/base.css

Contoh 3 - Menjadikan sifat tertentu mudah dibaca

Pembolehubah CSS sangat berguna jika kita ingin mencipta pintasan untuk nilai harta yang lebih kompleks supaya kita tidak perlu ingat ia.

Sifat CSS seperti box-shadow, transform dan font atau peraturan CSS lain dengan berbilang parameter adalah contoh yang baik.

Kami boleh meletakkan harta itu dalam pembolehubah supaya kami boleh menggunakannya semula dalam format yang lebih mudah dibaca.

// 主要代码
:root {
  --tiny-shadow: 4px 4px 2px 0 rgba(0, 0, 0, 0.8);
  --animate-right: translateX(20px);
}
li {
  box-shadow: var(--tiny-shadow);
}
li:hover {
  transform: var(--animate-right);
}

Cuba sendiri: https://codesandbox.io/s/q3ww1znxn9?from-embed=&file=/css_vars.css:0-187

Contoh 4 - Pembolehubah Lata

Peraturan lata piawai juga digunakan pada pembolehubah CSS. Jika sifat tersuai diisytiharkan beberapa kali, takrifan terendah dalam fail CSS akan mengatasi takrifan di atasnya.

Contoh di bawah menunjukkan betapa mudahnya untuk memanipulasi sifat secara dinamik pada tindakan pengguna sambil memastikan kod itu jelas dan ringkas.

// 主要代码
.orange-container {
  --main-text: 18px;
}
.orange-container:hover {
  --main-text: 22px;
}
.red-container:hover {
  --main-text: 26px;
}
.title {
  font-size: var(--title-text);
}
.content {
  font-size: var(--main-text);
}

.container:hover {
  --main-text: 18px;
}

Cuba sendiri: https://codesandbox.io/s/xj0qxn2l7w?from-embed=&file=/index.html

Contoh 5 - Penukaran Tema dengan Pembolehubah CSS

Salah satu perkara hebat tentang pembolehubah CSS ialah sifat responsifnya. Sebaik sahaja kami mengemas kininya, sebarang sifat dengan nilai pembolehubah CSS juga akan dikemas kini. Jadi, dengan hanya beberapa baris Javascript dan penggunaan bijak pembolehubah CSS, anda boleh mencipta mekanisme penukar tema.

Cuba sendiri: https://codesandbox.io/s/24j4m8y5kn?from-embed=&file=/scripts.js

扩展

就像CSS中几乎所有东西一样，变量也非常简单易用。 以下是一些未包含在示例中的技巧，但在某些情况下仍然非常有用：

注意大写，CSS变量区分大小写

:root {
 --color: blue;
 --COLOR: red;
}
/*--color and --COLOR are two different variables*/

当我们使用var()函数时，还可以传入第二个参数。 如果找不到自定义属性，则将使用此值：

width: var(--custom-width, 33%);

可以将CSS变量直接用于HTML

<!--HTML-->
<html style="--size: 600px">

body {
  max-width: var(--size)
}

可以在其他CSS变量中使用CSS变量：

--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);

可以通过媒体查询将CSS变量作为条件。 例如，以下代码根据屏幕大小更改 padding 的值：

:root {
    --padding: 15px 
}

@media screen and (min-width: 750px) {
    --padding: 30px
}

在calc()函数中也可以使用CSS变量。

--text-input-width: 5000px;
max-width: calc(var(--text-input-width) / 2);

CSS 变量不是灵丹妙药。 它们不会解决我们在CSS领域中遇到的所有问题。 但是，它可以让我们的代码更具可读性和可维护性。

而且，它们极大地提高了跨大型文档进行更改的便利性。 只需将所有常量设置在一个单独的文件中，当我们只想对变量进行更改时，就不必跳过数千行代码。

原文地址：http://www.js-craft.io/blog/17-3-examples-of-using-css-variables/

作者：Daniel

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci Biar saya membimbing anda langkah demi langkah melalui 5 contoh untuk membiasakan diri dengan pembolehubah CSS!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!