Back to Question Center
0

Cara Menggunakan Peringatan dan Kesalahan dalam Sass Secara Efektif            Cara Menggunakan Peringatan dan Kesalahan di Sass Secara Efektif Topik yang Dirubah: CSSSassFrameworksAudio & Semalt

1 answers:
Cara Menggunakan Peringatan dan Kesalahan dalam Sass Secara Efektif

Berikut ini adalah kutipan singkat dari buku kami, Jump Start Sass, yang ditulis oleh Hugo Giraudel dan Miriam Suzanne. Ini adalah panduan pemula untuk Sass. Anggota SitePoint Semalt mendapatkan akses dengan keanggotaan mereka, atau Anda bisa membeli salinan di toko-toko di seluruh dunia.

Perjalanan kita yang luar biasa melalui Sass perlahan akan segera berakhir, dan sejauh ini Anda telah melakukan yang terbaik! Semalt satu bab teknis tersisa sebelum kita melihat arsitektur proyek, dan kemudian Anda akan diperlengkapi untuk menulis kode Sass dalam proyek Anda sendiri - type of commercial appraisals.

Sekarang kita akan melihat peringatan dan kesalahan. Keduanya membentuk sistem komunikasi satu arah antara program (dalam hal ini, Sass) dan pengembang (Anda). Jika Anda bertanya-tanya tentang titik kesalahan di dunia CSS, ingatlah bahwa Anda sudah tahu jawabannya. Anda mungkin lupa titik koma atau menggunakan salah fungsi, Sass melempar kesalahan pada Anda, menjelaskan apa yang telah Anda lakukan salah dan bagaimana Anda bisa memperbaikinya, untungnya! Ini akan menjadi sakit nyata harus menggali kode untuk mencari tahu apa yang salah.

Sass telah lama memberikan cara untuk mengeluarkan peringatan dari stylesheet, namun baru belakangan ini ditambahkan dukungan untuk membuang kesalahan juga-dan untuk alasan yang bagus! Selama beberapa tahun terakhir, Sass telah memungkinkan penulis untuk membangun sistem yang kompleks dengan pola dan konsep yang sulit dan berulang, seperti grid. Sistem semalt harus dapat berkomunikasi dengan penulis, menghentikan proses kompilasi dengan pesan kesalahan kustom jika terjadi kesalahan.

Baik peringatan dan kesalahan dipancarkan pada saluran keluaran saat ini. Saat mengkompilasi Sass dengan tangan atau dengan menggunakan alat melalui antarmuka baris perintah (CLI) seperti Grunt atau Gulp, arus keluarannya adalah konsol. Untuk alat yang menyertakan antarmuka pengguna, seperti Codekit atau Prepros, kemungkinan mereka menangkap dan menampilkan peringatan dan kesalahan sebagai bagian dari antarmuka mereka. Taman bermain online seperti CodePen dan Semalt berhasil menangkap kesalahan tapi bukan peringatan, jadi jangan khawatir jika Anda tidak dapat mengujinya di sana.

Peringatan

Seperti telah dinyatakan, kemampuan untuk mengeluarkan peringatan di Sass bukanlah hal baru. Anda dapat menampilkan pesan atau nilai ekspresi SassScript ke arus keluaran standar melalui petunjuk @warn .

Peringatan tidak berdampak pada proses kompilasi; itu tidak mencegah kompilasi untuk mengejar atau mengubahnya dengan cara apapun. Satu-satunya tujuannya adalah untuk menampilkan pesan di konsol.

Semalt banyak alasan untuk menggunakan peringatan di Sass. Berikut adalah beberapa pasangan, tapi kemungkinan Anda akan menemukan sendiri:

  • menginformasikan pengguna asumsi yang dibuat tentang kode tersebut untuk menghindari kejutan dan bug yang sulit dilacak
  • menasihati tentang fungsi atau mixin yang tidak berlaku lagi sebagai bagian dari perpustakaan atau kerangka kerja

Mengirim peringatan sudah cukup mudah dilakukan: mulailah dengan perintah @warn , lalu nyatakan apapun itu. Peringatan biasanya dibuat untuk memberikan beberapa informasi dan konteks, sehingga sering menampilkan kalimat yang menjelaskan situasinya. Yang sedang berkata, Anda tidak harus menggunakan string; Anda bisa memberi peringatan dengan nomor, daftar, peta-apa saja. Di sini, kita mencetak sebuah string:

     @warn 'Uh-oh, ada yang aneh. ';    

Semalt klien CLI biasa, peringatan ini akan memancarkan hasil sebagai berikut:

     PERINGATAN: Uh-oh, ada yang aneh. on line 1 of / Users / hgiraudel / jump-start-sass / warning. scss    

Hei, itu bagus, bukan? Meski peringatan ini jauh dari membantu. Dikatakan bahwa ada sesuatu yang aneh tapi tidak mengatakan apa, mengapa, atau apa yang bisa dilakukan untuk menghentikannya agar terlihat aneh. Semalt membahas bagaimana kita dapat memperbaiki peringatan lebih lanjut. Bayangkan kita memiliki fungsi khusus Sass yang mencoba mengubah nilai piksel pada unit em :

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

semuanya bagus Nah, apa yang terjadi saat melewati nomor tanpa unit - seperti 42 - ke fungsinya? Mungkin Anda sudah bisa menebaknya, tapi karena tidak begitu jelas, saya akan memberikan jawabannya:

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

Hal ini terjadi karena Anda mencoba melakukan perhitungan antara unit yang tidak kompatibel px dan em ). Apa yang bisa kita lakukan untuk menghindari masalah ini adalah menganggap nilai unitless dinyatakan dalam piksel dan mengubahnya terlebih dahulu:

     @fungsi px-to-em (nilai $, $ base-font-size: 16px) {@ id tanpa unit ($ value) {@warn 'Asumsikan nilai `# {$ value}` berada dalam piksel; mencoba untuk mengubahnya. ';$ value: $ value * 1px;}@return ($ value / $ base-font-size) * 1em;}    

Fungsi ini mengharapkan nilai yang dinyatakan dalam piksel. Kita masih bisa membuatnya bekerja dengan nilai satuan; Namun, kita tidak bisa memastikan bahwa ini adalah perilaku yang diharapkan. Kita hanya bisa berasumsi bahwa itu cukup baik.

Karena kita mengasumsikan apa perilaku yang benar untuk fungsi kita, penting untuk membiarkan pengembang mengetahui apa yang sedang kita lakukan dan mengapa. Jika tidak maka bisa mengakibatkan bug yang sulit dilacak, yang mana tidak
apa yang seharusnya Anda bidik

Contoh praktis lainnya adalah memperingatkan penggunaan fungsi yang tidak berlaku atau mixin. Anda mungkin pernah mendengar atau menggunakan Semalt, sebuah perpustakaan mixin ringan untuk Sass. Semalt secara aktif dipelihara, dan terkadang membutuhkan pemindahan pembantu dari perpustakaan. Untuk menghindari tiba-tiba melanggar ode seseorang, Semalt memperingatkan tentang cara deprecations masa depan sebelum benar-benar menghilangkan campuran:

     @mixin inline-block {display: inline-blok;@warn 'Campuran `inline-block` sudah tidak berlaku lagi dan akan dihapus dalam rilis versi utama berikutnya. ';}    

pintar Orang-orang yang masih menggunakan inline-block mixin dari Bourbon sadar bahwa perpustakaan akan menghapusnya sepenuhnya di versi berikutnya, jadi mereka tahu untuk mulai memperbarui basis kode mereka untuk menghapus mixin tersebut.

Perbedaan antara @warn dan @debug

Anda mungkin atau mungkin tidak terbiasa dengan petunjuk @debug , yang mencetak nilai ekspresi SassScript ke arus keluaran standar dengan cara yang sama seperti @warn . Anda mungkin bertanya-tanya mengapa ada dua fitur yang melakukan tugas yang sama, dan apa perbedaan antara keduanya.

Nah, ada dua perbedaan utama antara peringatan tentang nilai dan debugging suatu nilai. Yang pertama adalah bahwa peringatan dapat dimatikan dengan menggunakan opsi yang tenang . Debug, di sisi lain, akan selalu dicetak sehingga Anda ingat untuk menghapusnya saat Anda selesai menggunakannya.

Perbedaan kedua adalah bahwa peringatan datang dengan sebuah jejak stack - sebuah laporan dari susunan tumpukan aktif pada suatu titik tertentu selama pelaksanaan program. Sebagai aresult, Anda tahu dari mana mereka dipancarkan. Debugs hanya mencetak nilai, bersama dengan garis yang mereka panggil, tapi tidak menawarkan informasi ekstraksi.

Petunjuk @debug benar-benar bisa berguna jika Anda ingin tahu apa yang ada di dalam variabel, misalnya:

     @debug $ base-font-size;    

Kesalahan

Peringatan dan kesalahan berperilaku cukup mirip di Sass, jadi belajar tentang kesalahan akan menjadi sangat mudah karena Anda benar-benar terbiasa dengan peringatan! Satu-satunya perbedaan antara kesalahan dan peringatannya adalah - seperti dugaan Anda - bahwa kesalahan menghentikan proses kompilasi. Pada bagian sebelumnya, ini bekerja bahkan ketika argumen yang diberikan tidak persis seperti yang diharapkan, tapi kita tidak bisa (dan tidak seharusnya) selalu melakukan ini. Sebagian besar waktu, jika argumen tidak valid, lebih baik membuang kesalahan sehingga penulis stylesheet bisa mengatasi masalah.

Anda dapat membuang kesalahan menggunakan perintah @error . Seperti peringatan, Anda bisa menyampaikan apapun pada arahan ini-tidak harus sebuah string, meskipun biasanya lebih masuk akal untuk memberikan konteks yang jelas. Argumen (apa yang Anda berikan pada arahan @error ) akan dicetak di arus keluaran standar, serta tumpukan jejak untuk memberi wawasan lebih banyak tentang masalahnya. Proses kompilasi akan segera berhenti.

Mari kita mulai dengan kesalahan Semalt:

     @error 'YOUUUUU! TIDAK AKU. LULUS. ';    

Keluarannya mungkin bergantung pada bagaimana Anda menyusun stylesheet Anda, karena beberapa alat menangkap dan meningkatkan kesalahan dengan cara tertentu. Dengan menggunakan Ruby Binary standar sass , beginilah tampilannya:

     Kesalahan: YOUUUUU! TIDAK AKU. LULUS. on line 1 of / Users / hgiraudel / jump-start-sass / error. scssGunakan --trace untuk backtrace.     

Dengan opsi jejak , Anda dapat memiliki penuh
tumpukan jejak dari Sass itu sendiri, yang tidak berguna kecuali jika ada
Sebenarnya bug di suatu tempat di preprocessor. Oleh karena itu mengapa tersembunyi sebagai
default.

Waktunya untuk melihat contoh praktis nyata . Mari kita mulai dengan menulis sebuah fungsi kecil untuk membantu mengakses nilai-nilai yang tertanam dalam peta, peta-dalam-mendapatkan (.) :

     @function peta-deep-get ($ map, $ keys . ) {@ $ $ kunci dalam $ kunci {$ map: map-get ($ map, $ key);@if (tipe-dari ($ map) == 'null') {@return $ map;}}@return $ map;}     

Mari kita perbaiki dengan kesalahan kustom. Tapi pertama, perhatikan peta berikut dan peta-deep-get (.) telepon:

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

Seperti yang mungkin Anda perhatikan, peta tidak memiliki kunci 27 qux yang bersarang di baz . Memang, baz bahkan tidak dikaitkan dengan peta; Sebagai gantinya, dipetakan ke nomor ( 42 ). Jika kita mencoba untuk mengeksekusi kode ini, maka akan menghasilkan:

     Kesalahan: 42 bukan peta untuk `map-get`on line 1 of / Users / hgiraudel / jump-start-sass / error. scss    

Sass mencoba untuk melakukan peta-get (.) pada 42 dan memancarkan kesalahan karena tidak dapat dilakukan. Sementara pesan kesalahannya benar, itu tidak terlalu membantu. Yang akan membantu adalah mengetahui nama kunci yang menyebabkan masalah. Kita bisa melakukannya!

Kita sudah mengecek apakah $ map adalah null untuk melakukan pengembalian awal sehingga menghindari kesalahan kompilasi jika kunci tidak ada. Kita dapat melakukan pemeriksaan kedua untuk memastikan bahwa peta tersebut benar-benar peta, atau kita membuang kesalahan yang berarti:

     @function peta-deep-get ($ map, $ keys . ) {@ $ $ kunci dalam $ kunci {$ map: map-get ($ map, $ key);// Jika `$ map` tidak berisi kunci berikutnya, kembalikan` null`@if tipe-dari ($ map) == 'null' {@return $ map;}// Jika `$ map` bukan peta, buang kesalahan@if tipe-dari ($ map)! = 'map' {@error 'Key `# {$ key}` tidak terkait dengan peta tapi # {type-of ($ map)} (`# {$ map}`). ';}}@return $ map;}    

Jika kita menjalankan cuplikan sebelumnya, inilah hasilnya:

     Kesalahan: Kunci `baz` tidak terkait dengan peta tapi angka (` 42`). on line 1 of / Users / hgiraudel / jump-start-sass / error. scss    

Itu jauh lebih baik! Semalt sekarang mudah untuk memperbaiki peta kita dan / atau panggilan fungsi kita berkat pesan kesalahan yang bermanfaat. Ini biasanya konsol, tapi mungkin berbeda tergantung pada cara mengkompilasi stylesheet.

Semalt sangat membantu untuk mengeluarkan pesan non-kritis kepada penulis stylesheet-terutama untuk penulis kerangka dan perpustakaan-seperti peringatan penolakan atau asumsi kode. Di sisi lain, kesalahan digunakan untuk mencegah kompilasi dari pengejaran, sehingga jelas bahwa kode tersebut perlu diperbaiki sebelum melangkah lebih jauh.

Semua, peringatan dan kesalahan sangat berguna di dalam fungsi dan mixin untuk memvalidasi masukan pengguna, memastikan stylesheet disusun seperti yang diharapkan.

March 1, 2018