Operasi logik dengan pembolehubah CSS

Artikel ini menunjukkan cara melakukan operasi logik pada pembolehubah suis CSS (pembolehubah dengan nilai 0 atau 1) menggunakan aritmetik dalam fungsi calc() . Kami tidak mempunyai fungsi logik yang berdedikasi dalam CSS, tetapi pengiraan ini memberikan emulasi yang berkesan.

Operasi logik dalam CSS menggunakan calc()

Bukan operasi

Menafikan pembolehubah suis ( --j ) adalah mudah: tolaknya dari 1.

 --notj: calc (1-var (-j));

Jika --j adalah 0, --notj menjadi 1; jika --j adalah 1, --notj adalah 0.

Dan operasi

Dan operasi mengembalikan benar hanya jika kedua -dua operan adalah benar. Untuk pembolehubah suis ( --k dan --i ), pendaraban mencapai ini:

 -dan: calc (var (-k) * var (-i));

Ini menghasilkan 1 hanya apabila kedua --k -dan --i adalah 1; Jika tidak, itu 0.

Operasi nand (tidak dan)

Nand adalah penolakan dan:

 --nand: calc (1-var (-k) * var (-i));

Atau operasi

Operasi atau adalah benar jika sekurang -kurangnya satu operan adalah benar. Menggunakan undang -undang De Morgan ( not (A or B) = (not A) and (not B) ), kita dapat:

 --or: calc (1-(1-var (-k)) * (1-var (-i)));

Dan tidak beroperasi (tidak atau)

Juga penolakan atau:

 --nor: calc ((1-var (-k)) * (1-var (-i)));

Operasi XOR (eksklusif atau)

XOR adalah benar jika betul -betul satu operan adalah benar. Mengurangkan pembolehubah dan mengikat hasilnya memberikan nilai mutlak, memberikan hasil yang dikehendaki 0 ​​atau 1:

 --xor: calc ((var (-k)-var (-i)) * (var (-k)-var (-i)));

Aplikasi praktikal

Menyembunyikan panel kurang upaya di skrin kecil

Contoh ini menunjukkan panel kawalan lanjutan yang dilumpuhkan yang hanya dapat dilihat pada skrin yang lebih besar.

Html (ilustrasi):

<div class="advanced">
  
</div>
<input type="checkbox" id="toggle">

CSS:

 badan {
  --K: var (-lebar, 0); / * Tukar untuk saiz skrin */
  Paparan: Flex;
  flex-arah: var (-lebar, lajur);
  @media (min-lebar: 768px) {--wide: 1; } / * Laraskan titik putus seperti yang diperlukan * /
}

.pelakur {
  --i: var (-didayakan, 0); / * Tukar untuk keadaan diaktifkan */
  --noti: calc (1-var (-i));
  penapis: kontras (calc (1-var (-noti) * 0.9)) kelegapan (calc (1-var (-noti) * 0.7));
  Pointer-events: var (-enabled, none);
  margin: calc (var (-atau) * 20px) 0; / * Contoh margin */
  ketinggian: calc (var (-atau) * 200px); / * Ketinggian contoh */
  [id = 'togol']: diperiksa ~ & {--Enabled: 1; }
  --or: calc (1-(1-var (-k)) * (1-var (-i))); / * Atau operasi */
}

Ini menggunakan OR Operasi ( --or ) untuk menunjukkan panel jika skrin luas ( --k adalah 1) atau panel diaktifkan ( --i adalah 1).

Posisi wajah bentuk 3D (contoh kompleks)

Contoh kedua, yang melibatkan bentuk 3D yang kompleks, menunjukkan penggunaan operasi logik yang lebih maju untuk kedudukan muka yang tepat. Oleh kerana kerumitannya, contoh ini ditinggalkan untuk keringkasan. Teks asal memberikan penjelasan terperinci dan demo interaktif yang menggambarkan kes penggunaan ini. Konsep teras tetap sama: menggunakan calc() dan operasi logik (dan, atau, tidak, XOR, NAND, NOR) untuk menggunakan transformasi secara kondusif berdasarkan keadaan berubah -ubah suis.

Atas ialah kandungan terperinci Operasi logik dengan pembolehubah CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!