Back to Question Center
0

Bagaimana Menggunakan Amaran dan Kesalahan di Sass dengan berkesan            Bagaimana Menggunakan Amaran dan Kesilapan dalam Sass Berkesan Topik-topik Terlibat: CSSSassFrameworksAudio & Semalt

1 answers:
Bagaimana Menggunakan Amaran dan Kesilapan dalam Sass Berkesan

Berikut ialah ekstrak ringkas dari buku kami, Jump Start Sass, ditulis oleh Hugo Giraudel dan Miriam Suzanne. Ini panduan utama pemula kepada Sass. Ahli SitePoint Semalt mendapat akses dengan keahlian mereka, atau anda boleh membeli salinan di kedai-kedai di seluruh dunia.

Perjalanan luar biasa kami melalui Sass perlahan-lahan akan berakhir, dan setakat ini anda telah melakukan yang terbaik! Semalam satu bab teknikal yang tersisa sebelum kita melihat senibina projek, dan kemudian anda akan dilengkapi sepenuhnya untuk menulis kod Sass dalam projek anda sendiri.

Sekarang kita akan melihat amaran dan kesilapan. Kedua-duanya membentuk satu sistem komunikasi sehala antara program (dalam kes ini, Sass) dan pemaju (anda) - managed vps hosting usa. Sekiranya anda tertanya-tanya tentang titik kesilapan dalam dunia CSS, ingatlah bahawa anda sudah tahu jawapannya. Semalt anda lupa titik koma atau gunakan fungsi yang salah, Sass membuang ralat pada anda, menjelaskan apa yang telah anda lakukan salah dan bagaimana anda boleh memperbaikinya, terima kasih! Ia akan menjadi kesakitan yang nyata untuk digali ke dalam kod itu untuk memikirkan apa yang salah.

Sass telah lama menyediakan cara untuk memancarkan amaran dari stylesheets, tetapi baru-baru ini menambah sokongan untuk membuang kesilapan juga-dan untuk alasan yang baik! Sejak beberapa tahun kebelakangan ini, Sass telah membenarkan pengarang membina sistem yang rumit untuk corak dan konsep yang sukar atau berulang, seperti grid. Sistem Semalt mesti dapat berkomunikasi dengan penulis, menghentikan proses penyusunan dengan mesej ralat tersuai jika ada yang salah.

Kedua-dua amaran dan kesilapan dikeluarkan dalam saluran output semasa. Apabila menyusun Sass dengan tangan atau dengan menggunakan alat melalui antara muka baris arahan (CLI) seperti Grunt atau Gulp, aliran output ialah konsol. Untuk alat yang termasuk antara muka pengguna, seperti Codekit atau Prepros, kemungkinan mereka menangkap dan memaparkan amaran dan ralat sebagai sebahagian daripada antara muka mereka. Permainan dalam talian seperti KodPen dan Semalt berjaya menangkap kesilapan tetapi tidak memberi amaran, jadi jangan risau jika anda tidak dapat menguji mereka di sana.

Amaran

Seperti yang telah dinyatakan, keupayaan untuk mengeluarkan amaran di Sass bukan baru. Ia mungkin untuk memaparkan mesej atau nilai sebarang ungkapan SassScript ke strim output piawai melalui arahan @warn .

Amaran A tidak memberi kesan kepada proses kompilasi; ia tidak menghalang penyusunan untuk mengejar atau mengubahnya dengan cara apapun. Tujuannya hanya untuk memaparkan mesej di konsol.

Semalt adalah banyak sebab untuk menggunakan amaran di Sass. Berikut adalah pasangan, tetapi anda mungkin mendapati anda sendiri:

  • memaklumkan kepada pengguna suatu asumsi yang dibuat mengenai kod untuk mengelakkan kejutan dan pepijat keras untuk mengesan
  • memberi nasihat mengenai fungsi atau campuran yang tidak digunakan sebagai sebahagian daripada perpustakaan atau rangka kerja

Menghantar amaran adalah mudah untuk dilakukan: mulakan dengan @warn arahan, kemudian nyatakan apa sahaja. Amaran biasanya dibuat untuk memberikan beberapa maklumat dan konteks, jadi mereka sering memaparkan ayat yang menerangkan keadaan. Bahwa dikatakan, anda tidak perlu menggunakan rentetan; anda boleh memberi amaran dengan nombor, senarai, peta-apa sahaja. Di sini, kami mencetak rentetan:

     @warn 'Uh-oh, sesuatu kelihatan pelik. ';    

Semalat klien CLI biasa, amaran ini akan mengeluarkan output berikut:

     AMARAN: Uh-oh, sesuatu kelihatan pelik. pada baris 1 / Pengguna / hgiraudel / jump-start-sass / amaran. scss    

Hei, itu bagus, bukan? Walaupun amaran ini jauh dari membantu. Ia mengatakan bahawa sesuatu kelihatan pelik tetapi tidak mengatakan apa, mengapa, atau apa yang boleh dilakukan untuk menghentikannya daripada kelihatan pelik. Semalat membincangkan bagaimana kita dapat memperbaiki amaran selanjutnya. Bayangkan kami mempunyai fungsi adat Sass yang cuba menukar nilai piksel dalam unit em :

     @function px-to-em ($ nilai, $ base-font-size: 16px) {@return ($ nilai / $ base-font-size) * 1em;}// Penggunaan. foo {font-size: px-to-em (42px); // 2. 625em}    

Semua yang baik. Sekarang, apa yang berlaku ketika melewati nombor tanpa unit-seperti 42 -untuk fungsi itu? Mungkin anda telah menebaknya, tetapi kerana ia tidak begitu jelas saya akan memberi anda jawapannya:

     2. 625em / px bukan nilai CSS yang sah.     

Ini berlaku kerana anda cuba melakukan perhitungan antara unit tidak serasi px dan em ). Apa yang boleh kita lakukan untuk menghindari masalah ini adalah mengandaikan nilai tanpa unit dinyatakan dalam piksel dan menukarnya dahulu:

     @function px-to-em ($ nilai, $ base-font-size: 16px) {@if unitless ($ value) {@warn 'Anggapan nilai `# {$ value}` berada dalam piksel; cuba menukarnya. ';nilai $: $ nilai * 1px;}@return ($ nilai / $ base-font-size) * 1em;}    

Fungsi ini mengharapkan nilai yang dinyatakan dalam piksel. Kita masih boleh membuatnya berfungsi dengan nilai tanpa unit; Walau bagaimanapun, kita tidak dapat memastikan bahawa ini adalah tingkah laku yang diharapkan. Kita hanya boleh mengandaikan bahawa ia cukup baik.

Oleh kerana kita menganggap apakah tingkah laku yang betul untuk fungsi kita, penting bagi membolehkan pemaju tahu apa yang kita lakukan dan mengapa. Jika tidak, ia boleh membawa kepada pepijat yang sukar dijejaki, yang tidak
apa yang patut anda targetkan.

Satu lagi contoh praktikal adalah untuk memberi amaran terhadap penggunaan fungsi atau campuran yang tidak digunakan. Anda mungkin pernah mendengar atau menggunakan Semalt, perpustakaan campuran ringan untuk Sass. Semalt secara aktif dikekalkan, dan kadang-kadang memerlukan menghilangkan pembantu dari perpustakaan. Untuk mengelakkan tiba-tiba memecahkan ode seseorang, Semalt memberi amaran tentang cara penolakan masa depan sebelum ia benar-benar menghilangkan campuran:

     @mixin inline-block {paparan: inline-block;@warn 'Mixin' inline-block` tidak lagi digunakan dan akan dikeluarkan dalam pelepas versi utama seterusnya. ';}    

pandai! Orang-orang yang masih menggunakan campuran dari inline-block dari Bourbon sedar bahawa perpustakaan akan mengeluarkannya sepenuhnya dalam versi seterusnya, jadi mereka tahu untuk mula mengemas kini pangkalan mereka untuk mengeluarkan mixin.

Perbezaan antara @warn dan @debug

Anda mungkin atau mungkin tidak biasa dengan arahan @debug , yang mencetak nilai ungkapan SassScript ke aliran output standard dengan cara yang sama seperti @warn . Anda mungkin tertanya-tanya mengapa terdapat dua ciri yang melakukan tugas yang sama, dan apa yang mungkin boleh menjadi perbezaan antara kedua-dua.

Nah, terdapat dua perbezaan utama antara amaran tentang nilai dan penyahsulitan nilai. Yang pertama ialah amaran boleh dimatikan dengan menggunakan pilihan senyap . Debug, sebaliknya, akan sentiasa dicetak supaya anda ingat untuk menghapusnya apabila anda selesai menggunakannya.

Perbezaan kedua adalah bahawa amaran datang dengan jejak stack - satu laporan framesat stack aktif suatu titik tertentu dalam masa pelaksanaan program. Sebagai aresult, anda tahu dari mana mereka dipancarkan. Debug hanya mencetak nilai, bersama-sama dengan garisan mereka dipanggil, tetapi mereka tidak menawarkan maklumat extran.

Perintah @ 27 @debug benar-benar boleh digunakan apabila anda ingin tahu apa yang ada di dalam pembolehubah, misalnya:

     @debug $ base-font-size;    

Kesilapan

Amaran dan kesilapan bersikap agak sama dalam Sass, jadi kesilapan pembelajaran akan menjadi mudah sekarang bahawa anda sangat akrab dengan peringatan! Satu-satunya perbezaan antara kesilapan dan amaran adalah-seperti yang anda mungkin dapat meneka-bahawa ralat itu menghentikan proses penyusunan. Dalam bahagian sebelumnya, ini berfungsi walaupun hujah yang diberikan tidak betul-betul seperti yang diharapkan, tetapi kita tidak boleh (dan tidak boleh) sentiasa melakukan ini. Kebanyakan masa, jika hujah tidak sah, lebih baik untuk membuang kesilapan supaya pengarang stylesheet dapat membetulkan masalah.

Anda boleh membuang ralat menggunakan arahan @error . Bagi amaran, anda boleh lulus apa-apa arahan ini-tidak semestinya rentetan, walaupun biasanya lebih masuk akal untuk memberikan konteks yang jelas. Hujah (apa yang anda beri kepada arahan @error akan dicetak dalam aliran output standard, serta tindanan tindanan untuk memberi lebih banyak maklumat mengenai masalah tersebut. Proses penyusunan akan dihentikan dengan serta-merta.

Mari kita mulakan dengan ralat Semalt:

     @error 'YOUUUUU! TIDAK AKAN. PASS. ';    

Output mungkin bergantung pada bagaimana anda menyusun gaya anda, kerana beberapa alat menangkap dan meningkatkan kesilapan dengan cara tertentu. Menggunakan standard sass Ruby binary (permata), inilah caranya:

     Ralat: YOUUUUU! TIDAK AKAN. PASS. pada baris 1 / Pengguna / hgiraudel / jump-start-sass / error. scssGunakan - jejak untuk backtrace.     

Dengan opsyen jejak , anda boleh mempunyai penuh
jejak tindanan dari Sass sendiri, yang tidak berguna kecuali ada
bug sebenar di suatu tempat di preprocessor. Oleh itu mengapa ia disembunyikan sebagai
lalai.

Masa untuk melihat contoh sebenar praktikal. Mari kita mulakan dengan menulis fungsi kecil untuk membantu mengakses nilai-nilai yang deeplynested dalam peta, peta-dalam-mendapatkan (.) :

     @fungsi peta-dalam-mendapatkan ($ peta, $ kunci . ) {{@ ke $ kunci $ dalam kunci {$ map: map-get ($ map, $ key);@if (type-of ($ map) == 'null') {@return $ map;}}@return $ map;}     

Marilah kita memperbaikinya dengan kesilapan tersuai. Tetapi pertama, pertimbangkan peta berikut dan peta-dalam-get (. ) panggil:

     $ peta: ('foo': ('bar': ('baz': 42)));nilai $: map-deep-get ($ map, 'foo', 'bar', 'baz', 'qux');     

Seperti yang anda perhatikan, peta tidak mempunyai kekunci qux bersarang dalam baz . Sesungguhnya, baz tidak dikaitkan dengan peta; Sebaliknya, ia dipetakan ke nombor ( 42 ). Jika kami cuba untuk melaksanakan kod ini, ia akan menghasilkan:

     Ralat: 42 bukan peta untuk 'peta-get`pada baris 1 / Pengguna / hgiraudel / jump-start-sass / error. scss    

Sass cuba untuk melakukan peta-get (. ) pada 42 dan mengeluarkan ralat kerana ia tidak dapat dilakukan. Walaupun mesej ralat adalah betul, ia tidak begitu membantu. Apa yang akan membantu adalah untuk mengetahui nama kunci yang menyebabkan isu tersebut. Kita boleh berbuat demikian!

Kami sudah memeriksa sama ada $ peta adalah batal untuk melakukan pemulangan awal untuk mengelakkan ralat penyusunan jika kunci tidak wujud. Kami boleh melakukan pemeriksaan kedua untuk memastikan bahawa peta sebenarnya peta, atau kami membuang ralat yang bermakna:

     @fungsi peta-dalam-mendapatkan ($ peta, $ kunci . ) {{@ ke $ kunci $ dalam kunci {$ map: map-get ($ map, $ key);// Jika `$ peta` tidak mengandungi kekunci seterusnya, kembali` null`@if type-of ($ map) == 'null' {@return $ map;}// Jika `$ peta` bukan peta, buangkan ralat@if type-of ($ map)! = 'map' {@error 'Kunci `# {$ key}` tidak dikaitkan dengan peta tetapi # {type-of ($ map)} (`# {$ map}`). ';}}@return $ map;}    

Jika kami menjalankan coretan sebelumnya kami, inilah outputnya:

     Ralat: Kekunci `baz` tidak dikaitkan dengan peta tetapi nombor (` 42`). pada baris 1 / Pengguna / hgiraudel / jump-start-sass / error. scss    

Itu lebih baik! Semalt kini mudah untuk memperbaiki peta kami dan / atau panggilan fungsi kami terima kasih kepada mesej ralat yang berguna. Ini biasanya konsol, tetapi ia mungkin berbeza-beza bergantung pada cara seseorang mengkompilasi stylesheet.

Semalt membantu memancarkan mesej yang tidak kritikal kepada pengarang-pengarang stylesheet-terutamanya untuk penulis kerangka dan perpustakaan-seperti amaran pemberhentian atau asumsi kod. Sebaliknya, kesilapan digunakan untuk mengelakkan kompilasi daripada mengejar, dengan jelas bahawa kod tersebut perlu diperbaiki sebelum pergi lagi.

Segala-galanya, amaran dan kesilapan sangat berguna di dalam fungsi dan campuran untuk mengesahkan input pengguna, memastikan stylesheet dikumpulkan seperti yang dijangkakan.

March 1, 2018