Trik Nilai Harta Tekanan Custom Pilihan

Mengendalikan nilai harta tersuai pilihan dalam pelbagai sifat CSS yang bernilai seperti transform memerlukan kadang-kadang beberapa helah. Katakan anda mempunyai elemen yang atribut transform mengandungi pelbagai nilai:

 .el {
  Transform: Terjemahan (100px) Skala (1.5) Skew (5Deg);
}

Jika anda ingin memohon hanya nilai transformasi tertentu yang diperlukan, anda boleh menggunakan sifat tersuai untuk mencapai pilihan:

 .el {
  / * |-lalai --- |-Pilihan-|.
  Transform: Terjemahan (100px) var (-Transform);
}

Walau bagaimanapun, jika --transform tidak ditakrifkan, keseluruhan transform Property akan menjadi tidak sah. Penyelesaiannya adalah menggunakan nilai null sebagai nilai sandaran:

 .el {
  Transform: Terjemahan (100px) var (-transform,);
}

Perhatikan perbezaannya? Di sini nilai null ( , ) ditakrifkan sebagai sandaran. Menurut spesifikasi:

Tidak seperti peraturan peninggalan koma biasa (yang memerlukan menghilangkan apabila koma tidak memisahkan nilai), dalam var() , koma yang berasingan (tiada selepas itu) mesti dianggap sah, menunjukkan nilai sandaran kosong.

Ini adalah sama dengan teknik pensuisan harta CSS Custom, yang menggunakan sifat tersuai untuk mempunyai nilai ruang.

Demo

Trik ini berfungsi dengan mana-mana atribut CSS multi-bernilai. Di samping transform , demonstrasi berikut juga menggunakan text-shadow , background , dan filter .

Bagi sesetengah sifat yang menerima pelbagai nilai (seperti text-shadow ), pengendalian khas diperlukan kerana ia hanya memohon kepada pemisah koma. Dalam kes ini, apabila menentukan harta tersuai CSS, anda (sebagai pengarang kod) tahu bahawa ia hanya digunakan dalam konteks nilai yang ditentukan oleh harta tersuai. Kemudian anda perlu memasukkan koma secara langsung sebelum nilai pertama dalam harta tersuai, seperti itu:

 --Text-shadow:, 0 0 5px hitam;

Sudah tentu, ini mengehadkan keupayaan untuk menggunakan pembolehubah ini jika nilai atribut adalah unik. Walau bagaimanapun, ini dapat diselesaikan dengan mewujudkan "lapisan" pembolehubah, iaitu sifat tersuai menunjuk ke sifat tersuai tahap yang lebih rendah.

Perhatikan pengkompil sass

Semasa meneroka helah ini, saya mendapati bahawa terdapat pepijat dalam pengkompil SASS yang menghilangkan nilai sandaran kosong ( , ), yang tidak konsisten dengan spesifikasi. Saya telah melaporkan kesilapan ini dan berharap ia akan diperbaiki tidak lama lagi.

Sebagai penyelesaian sementara, anda boleh menggunakan nilai sandaran yang tidak menyebabkan rendering, sebagai contoh:

 Transform: Terjemahan (100px) var (-Transform, Skala (1));

Atas ialah kandungan terperinci Trik Nilai Harta Tekanan Custom Pilihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!