Apabila SASS dan CSS baru ciri bertembung

CSS baru -baru ini telah menambah banyak ciri -ciri sejuk, seperti sifat tersuai dan fungsi baru. Walaupun ciri -ciri ini dapat memudahkan kerja kami, mereka juga boleh membuat masalah interaksi yang menarik dengan preprocessors seperti SASS.

Artikel ini akan meneroka masalah yang saya hadapi, penyelesaian, dan mengapa saya masih berfikir SASS adalah penting.

Ralat ditemui

Jika anda telah menggunakan fungsi min() dan max() baru, anda mungkin menghadapi mesej ralat seperti ini apabila mengendalikan unit yang berbeza: "Unit yang tidak serasi: VH dan EM".

Ini kerana SASS mempunyai fungsi min() sendiri dan mengabaikan fungsi min() CSS . Selain itu, SASS tidak dapat melakukan apa -apa pengiraan menggunakan nilai yang tidak mempunyai hubungan tetap antara dua unit.

Sebagai contoh, terdapat hubungan tetap antara CM dan unit, jadi SASS dapat mengira hasil min(20in, 50cm) dan tidak akan melaporkan ralat apabila digunakan dalam kod.

Begitu juga dengan unit lain. Sebagai contoh, terdapat hubungan tetap antara unit sudut: 1Turn, 1Rad, atau 1Grad sentiasa dikira sebagai nilai DEG yang sama. Begitu juga, 1s sentiasa 1000ms, 1kHz sentiasa 1000Hz, 1DPPX sentiasa 96dpi, dan 1in sentiasa 96px. Itulah sebabnya Sass boleh menukar di antara mereka dan mencampurkannya dalam pengiraan dan fungsi (seperti fungsi min() sendiri).

Walau bagaimanapun, apabila tiada hubungan tetap antara unit -unit ini (seperti contoh -contoh sebelumnya unit EM dan VH), masalah timbul.

Ia bukan hanya unit yang berbeza. Cuba menggunakan calc() min() juga akan mengakibatkan ralat. Jika saya mencuba kod seperti calc(20em 7px) saya mendapat ralat bahawa " calc(20em 7px) bukan nombor untuk min ".

Satu lagi masalah timbul apabila kita mahu menggunakan hasil fungsi pembolehubah CSS atau matematik CSS seperti calc() , min() atau max() ) dalam penapis CSS (mis. invert() ).

Dalam kes ini, kami akan menerima petunjuk bahawa "` $ warna: 'var (-p, 0.85)' bukan warna yang sah untuk terbalik ".

Masalah yang sama berlaku grayscale() : " $color: 'calc(.2 var(--d, .3))' bukan warna yang sah untuk skala kelabu".

opacity() juga menyebabkan masalah yang sama: " $color: 'var(--p, 0.8)' bukan warna yang sah untuk kelegapan".

Walau bagaimanapun, fungsi penapis lain-termasuk sepia() , blur() , drop-shadow() , brightness() , contrast() , dan hue-rotate() -semuanya berfungsi dengan baik dengan pembolehubah CSS!

Seperti yang ternyata, apa yang berlaku adalah serupa dengan masalah min() dan max() . SASS tidak mempunyai sepia() , blur() , drop-shadow() , brightness() , contrast() , fungsi hue-rotate() , tetapi ia mempunyai fungsi grayscale() , invert() dan opacity() , dan argumen pertama mereka adalah nilai $color . Oleh kerana ia tidak dapat mencari parameter, ralat dilemparkan.

Atas sebab yang sama, kami juga menghadapi masalah apabila cuba menggunakan pembolehubah CSS yang menyenaraikan sekurang -kurangnya dua nilai hsl() atau hsla() .

Sebaliknya, color: hsl(9, var(--sl, 95%, 65%)) adalah CSS yang sah dan berfungsi dengan baik tanpa SASS.

Perkara yang sama berlaku kepada fungsi rgb() dan rgba() .

Selain itu, jika kita mengimport kompas dan cuba menggunakan pembolehubah CSS di dalam linear-gradient() atau radial-gradient() , walaupun kita menggunakan pembolehubah di dalam conic-gradient() (jika penyemak imbas menyokongnya), kita juga akan mendapat ralat lain.

Ini kerana kompas dilengkapi dengan fungsi linear-gradient() dan radial-gradient() , tetapi fungsi conic-gradient() tidak pernah ditambah.

Masalah dalam semua kes ini berpunca daripada SASS atau Kompas yang mempunyai fungsi nama yang sama, dan dengan anggapan ini adalah fungsi yang kami ingin gunakan dalam kod kami.

Alamak!

Penyelesaian

Caranya di sini adalah untuk mengingati bahawa SASS adalah sensitif kes, tetapi CSS tidak sensitif kes .

Ini bermakna kita boleh menulis Min(20em, 50vh) yang sass tidak akan dikenali sebagai fungsi min() sendiri. Tiada kesilapan dilemparkan, ia masih sah CSS dan berfungsi seperti yang diharapkan. Begitu juga, menulis HSL() / HSLA() / RGB() / RGBA() atau Invert() boleh mengelakkan masalah yang kita ada sebelum ini.

Bagi kecerunan, saya biasanya lebih suka linear-Gradient() dan radial-Gradient() kerana ia lebih dekat dengan versi SVG, tetapi ia berfungsi dengan baik dengan sekurang-kurangnya satu huruf modal di dalamnya.

Kenapa?

Hampir setiap kali saya menyiarkan mana-mana tweet yang berkaitan dengan SASS, saya akan diberi amaran bahawa sekarang dengan pembolehubah CSS, SASS tidak boleh digunakan lagi. Saya mahu menyelesaikan masalah ini dan menjelaskan mengapa saya tidak bersetuju.

Pertama, ketika saya mendapati pembolehubah CSS sangat berguna dan digunakan dalam hampir setiap aspek dalam tempoh tiga tahun yang lalu, adalah penting untuk diperhatikan bahawa mereka datang dengan kos prestasi dan ia boleh menyakitkan untuk menggunakan DevTools semasa untuk mengesan di mana kesilapan muncul dalam maze pengiraan calc() . Saya cuba mengelakkan terlalu banyak penggunaannya supaya tidak terjebak dalam keadaan di mana kekurangan menggunakannya melebihi manfaat.

Secara umumnya, jika ia berfungsi seperti yang tetap, tidak mengubah elemen demi elemen atau negara-negara (di mana atribut tersuai pastinya pilihan terbaik), atau mengurangkan bilangan CSS yang disusun (menyelesaikan masalah pendua yang dicipta oleh awalan), maka saya akan menggunakan pemboleh ubah SASS.

Kedua, pembolehubah selalu menjadi sebahagian kecil dari sebab saya menggunakan SASS. Apabila saya mula menggunakan SASS pada akhir 2012, ia digunakan terutamanya untuk gelung, yang merupakan ciri yang kita masih tidak ada di CSS pada masa ini. Walaupun saya telah memindahkan sebahagian daripada gelung ke preprocessor HTML (kerana ia mengurangkan kod yang dihasilkan dan mengelakkan untuk mengubah suai kedua -dua HTML dan CSS kemudian), saya masih menggunakan gelung SASS dalam banyak kes, seperti menjana senarai nilai, menghentikan senarai dalam fungsi kecerunan, senarai titik dalam bentuk polygon.

(Kandungan berikut selaras dengan teks asal, menghilangkan bahagian pendua untuk mengelakkan kelebihan)

Atas ialah kandungan terperinci Apabila SASS dan CSS baru ciri bertembung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!