Kekuatan (dan keseronokan) skop dengan sifat tersuai CSS

CSS Custom Properties (pembolehubah) menawarkan keupayaan scoping yang kuat sering diabaikan. Artikel ini meneroka cara memanfaatkan kuasa ini untuk gaya yang cekap dan dinamik.

Walaupun anda mungkin biasa dengan penggunaan pembolehubah CSS asas (contohnya, --size: 1em; font-size: var(--size); ), potensi penuh mereka terletak pada kebolehan scoping mereka. Ini membolehkan pengurangan kod yang signifikan dan penyelenggaraan yang lebih mudah.

Mari memeriksa aplikasi praktikal:

Gaya Scoped: Contoh Butang

Pertimbangkan penggayaan butang primer dan sekunder. Pendekatan tradisional mungkin melibatkan gaya berasingan untuk setiap jenis butang dan pelbagai negeri (hover, aktif). Ini membawa kepada kod berulang.

Menggunakan pembolehubah scoped, kita boleh menentukan gaya butang asas dan kemudian hanya mengubah warna untuk jenis butang yang berbeza:

 .button {
  Padding: 1rem 1.25rem;
  Warna: #FFF;
  Font-Weight: Bold;
  saiz font: 1.25rem;
  Margin: 1rem;
  Peralihan: Latar belakang 0.1s mudah;
  Latar Belakang: HSL (var (-Hue), 100%, 50%);
  Outline-color: HSL (var (-hue), 100%, 80%);
}
.button: hover {latar belakang: hsl (var (-hue), 100%, 40%); }
.button: aktif {latar belakang: hsl (var (-hue), 100%, 30%); }

.Button-Primary {--hue: 233; }
.Button-Sekitar {--hue: 200; }

Ini secara drastik mengurangkan kod dan memudahkan penyelenggaraan. Perubahan kepada asas .button Button Gaya secara automatik mengemas kini semua varian. Selain itu, anda boleh menyatukan pembolehubah secara langsung di HTML untuk fleksibiliti yang lebih besar:

 <button class="button" style="--hue: 20;">Ditindas</button>

Animasi dinamik dengan pembolehubah sebaris

Kuasa sebenar bersinar apabila menggabungkan sifat tersuai dengan generasi dinamik, misalnya, menggunakan enjin templat seperti PUG atau JavaScript. Ini membolehkan tugasan pembolehubah inline secara rawak, mewujudkan animasi yang unik untuk setiap elemen.

Contoh: butang "teruja"

Mari buat butang yang terapung dengan halus dan kemudian "shake" pada hover. Daripada menentukan kerangka utama yang berasingan untuk setiap animasi, kami menggunakan pembolehubah untuk mengawal tingkah laku animasi dalam satu definisi kekunci utama:

 .button {
  --y: -25; --x: 0; -Rotation: 0; --Pelepasan: 2;
  Animasi: aliran-dan-shake calc (var (-kelajuan) * 1s) tak terhingga mudah-dalam-keluar;
}

.button: hover { - -speed: .1; --x: 1; --y: -1; -Rotation: -1; }

@KeyFrames Flow-and-Shake {
  0%, 100%{transform: translate (calc (var (-x) * -1%), calc (var (-y) * -1%)) berputar (calc (var (-putaran) * -1deg)); }
  50%{transform: translate (calc (var (-x) * 1%), calc (var (-y) * 1%)) berputar (calc (var (-putaran) * 1deg)); }
}

Pendekatan ini secara drastik mengurangkan bilangan definisi utama yang diperlukan, yang membawa kepada kod yang lebih bersih dan lebih diselenggara.

Contoh: Gelembung rawak

Membina atas ini, kita boleh membuat adegan dengan gelembung animasi berganda, masing -masing dengan sifat rawak (saiz, kedudukan, kelajuan animasi, dan lain -lain) semuanya dikawal melalui pembolehubah CSS scoped. Ini mempamerkan kuasa menggabungkan scoping berubah -ubah dengan penjanaan kandungan dinamik.

Ringkasnya, dengan berkesan menggunakan sifat adat CSS dan keupayaan scoping mereka membolehkan untuk mewujudkan gaya dinamik dan kompleks dengan kod yang kurang jelas, menyebabkan peningkatan dan kecekapan yang lebih baik. Contoh -contoh yang disediakan menunjukkan bagaimana untuk mencapai ini untuk kedua -dua unsur statik dan animasi.

Atas ialah kandungan terperinci Kekuatan (dan keseronokan) skop dengan sifat tersuai CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!