Pemahaman mendalam tentang pembolehubah css (ringkasan tersusun)

Artikel ini membawakan anda pengetahuan yang berkaitan tentang pembolehubah css secara beransur-ansur mula menyokong fungsi sarang, pembolehubah dan fungsi.

Sesiapa yang telah menggunakan sass atau kurang tahu bahawa mereka boleh mempunyai fungsi sarang, pembolehubah dan fungsi Malah, dalam css asli, ia telah mula disokong secara beransur-ansur. Memang benar bahawa pada masa ini hanya Anda dan saya yang mengetahuinya dengan baik, tetapi yang lain masih dalam peringkat permulaan Jika anda memahami pembolehubah CSS, anda akan mendapati bahawa CSS telah menjadi sangat berkuasa mulai sekarang.

Pengisytiharan pembolehubah

Apabila mengisytiharkan pembolehubah, tambah dua sempang (--) di hadapan nama pembolehubah

// 局部声明
body {
  --foo: #ed145b;
  --bar: #F7EFD2;
}
// 全局声明
:root{
  --foo: #ed145b;
  --bar: #F7EFD2;
}

Sebagai contoh , di atas Kami mengisytiharkan dua pembolehubah: --foo dan --bar Sebenarnya, anda hanya perlu memahaminya sebagai sifat tersuai css ia tidak berbeza daripada sifat formal seperti warna dan saiz fon, tetapi ia tidak mempunyai makna lalai . Beri perhatian kepada css Nama pembolehubah adalah sensitif huruf besar dan biasanya CSS yang kami tulis tidak.

Anda mungkin bertanya, mengapa memilih dua baris kata hubung (--) untuk mewakili pembolehubah? Kerana $foo digunakan oleh Sass, dan @foo digunakan oleh Less. Untuk mengelakkan konflik, pembolehubah CSS rasmi menggunakan dua baris kata hubung.

Konvensyen penamaan

Mengenai penamaan, pelbagai bahasa mempunyai beberapa petunjuk Contohnya, pemilih CSS tidak boleh bermula dengan nombor, dan pembolehubah dalam JS tidak boleh secara langsung dalam pembolehubah CSS , tiada sekatan seperti itu, seperti:

:root {
  --1: #369;
}
body {
  background-color: var(--1);
}

tidak boleh mengandungi aksara seperti $, [, ^, (, %, dll. Aksara biasa terhad kepada "nombor [0-9]" " huruf [a -zA-Z]", "underscore_" dan "dash-" ialah gabungan, tetapi ia boleh dalam bahasa Cina, Jepun atau Korea, contohnya:

body {
  --深蓝: #369;
  background-color: var(--深蓝);
}

fungsi var()

Selepas mengisytiharkan pembolehubah, kita secara semula jadi ingin mendapatkan dan menggunakannya, jadi fungsi var() digunakan untuk membaca pembolehubah

p {
  color: var(--foo);
  border::1px solid var(--bar);
}

Parameter kedua var()

color: var(--foo, #ED145B); //第二个参数就是默认值，假设--foo为空情况下，会使用#ED145B

Fungsi var() juga boleh digunakan dalam pengisytiharan pembolehubah

:root {
  --primary-color: red;
  --logo-text: var(--primary-color); // 上面刚声明，这里就可以使用
}

Nilai pembolehubah hanya boleh digunakan sebagai nilai atribut, bukan nama atribut

.foo {
  --side: margin-top;
  /* 很显然，下面是无效的 */
  var(--side): 20px;
}

Jenis nilai pembolehubah

Jika nilai pembolehubah ialah rentetan, ia boleh digabungkan dengan rentetan lain

--bar: 'hello';
--foo: var(--bar)' world';
// 示例
body:after {
  content: '--screen-category : 'var(--screen-category);
}

Jika nilai pembolehubah ialah nilai berangka, ia tidak boleh digunakan secara langsung dengan unit berangka

foo {
  --gap: 20;
  /* 下面无效 */
  margin-top: var(--gap)px;
 /* 通过calc去计算，下面有效 */
  margin-top: calc(var(--gap) * 1px);
}

Jika nilai pembolehubah mengandungi Jika terdapat unit, ia tidak boleh ditulis sebagai rentetan

/* 无效 */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}
/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

Skop

Pembolehubah CSS yang sama boleh diisytiharkan dalam berbilang pemilih apabila membaca, pengisytiharan dengan keutamaan tertinggi ini berkuat kuasa dengan peraturan "lata" CSS

<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }
</style>
<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>

Dalam kod di atas, tiga pemilih mengisytiharkan -. -pembolehubah warna apabila elemen berbeza membaca pembolehubah ini, mereka akan menggunakan peraturan dengan keutamaan tertinggi, jadi warna bagi tiga perenggan adalah berbeza

Pemprosesan keserasian

Untuk penyemak imbas yang. tidak menyokong pembolehubah CSS, kaedah penulisan berikut boleh digunakan >

a {
  color: #7F583F;
  color: var(--primary); // 应该很好理解，如果这里读不出值，那么并不会覆盖上面的color
}

a {
@supports ( (--a: 0)) {
  /* supported */
}
@supports ( not (--a: 0)) {
  /* not supported */
}

<🎜. >JavaScript juga boleh mengesan sama ada penyemak imbas menyokong pembolehubah CSS

const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);
if (isSupported) {
  /* supported */
} else {
  /* not supported */
}

// 设置变量
document.body.style.setProperty('--primary', '#7F583F'); //局部
document.documentElement.style.setProperty('--primary', '#7F583F'); //全局
// 读取变量
document.body.style.getPropertyValue('--primary').trim(); /局部
document.documentElement.style.getPropertyValue('--primary').trim(); /全局
getComputedStyle(document.documentElement).getPropertyValue('--time'); // 全局，如果是在css表中设置的需要这种方式获取
// '#7F583F'
// 删除变量
document.body.style.removeProperty('--primary'); //局部
document.documentElement.style.removeProperty('--primary'); //全局

const docStyle = document.documentElement.style;
document.addEventListener('mousemove', (e) => {
  docStyle.setProperty('--mouse-x', e.clientX);
  docStyle.setProperty('--mouse-y', e.clientY);
});

const docStyle = document.documentElement.style;
document.addEventListener('mousemove', (e) => {
  docStyle.setProperty('--mouse-x', e.clientX);
  docStyle.setProperty('--mouse-y', e.clientY);
});

--foo: if(x > 5) this.width = 10;

Ringkasan

Ciri asli penyemak imbas boleh dijalankan terus tanpa sebarang terjemahan

Ahli objek DOM, yang sangat memudahkan sambungan antara CSS dan JS

Ia tidak menghalang anda daripada menggunakan Sass/Less, ia boleh digabungkan

(Belajar perkongsian video:

)

Atas ialah kandungan terperinci Pemahaman mendalam tentang pembolehubah css (ringkasan tersusun). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!