Rumah hujung hadapan web tutorial css Menggunakan @error secara bertanggungjawab dalam sass

Menggunakan @error secara bertanggungjawab dalam sass

Feb 24, 2025 am 09:25 AM

Using @error responsibly in Sass

mata utama

    Arahan
  • dalam SASS adalah alat yang berkuasa untuk mengawal input pengarang dan membuang kesilapan apabila masalah berlaku, yang lebih berkesan daripada membenarkan kegagalan pengkompil. @error
  • Untuk versi lama SASS yang tidak menyokong
  • , anda boleh menggunakan arahan @error sebaliknya. Untuk memastikan bahawa pengkompil masih terhempas apabila ralat berlaku, makro hibrid boleh dibuat yang mencetuskan ralat penyusunan selepas amaran. @warn Fungsi
  • boleh digunakan untuk memeriksa sama ada feature-exists('at-error') disokong. Jika tidak disokong, gunakan arahan @error dan kemudian gunakan fungsi tanpa pernyataan @warn untuk merosakkan pengkompil. @return Fungsi
  • boleh digunakan dalam fungsi lain, dan log makro hibrid boleh digunakan di tempat lain, dengan itu membuang kesilapan secara bertanggungjawab. Ini membolehkan pengurusan ralat yang cekap untuk versi SASS yang berlainan. log
Sejak Ruby Sass 3.4 dan Libsass 3.1, arahan

boleh digunakan. Arahan ini sama dengan @error dan direka untuk menamatkan proses pelaksanaan dan memaparkan mesej tersuai ke aliran output semasa (mungkin konsol). @warn

tidak perlu dikatakan, ciri ini sangat berguna apabila membina fungsi dan makro campuran yang melibatkan beberapa logik SASS untuk mengawal input pengarang dan membuang kesilapan apabila sebarang masalah timbul. Anda perlu mengakui bahawa ini lebih baik daripada membiarkan pengkompil gagal, bukan?

semuanya baik. Kecuali SASS 3.3 masih digunakan secara meluas. SASS 3.2 juga digunakan di beberapa tempat. Mengemas kini SASS tidak mudah, terutamanya dalam projek besar. Kadang -kadang ia tidak boleh menghabiskan masa dan anggaran untuk mengemas kini sesuatu yang berfungsi dengan baik. Untuk versi yang lebih lama ini,

tidak bermakna dan dianggap sebagai adat @error, yang benar -benar dibenarkan dalam SASS untuk alasan keserasian ke hadapan. at-directive

Nah, adakah ini bermakna bahawa melainkan jika kita memutuskan untuk menyokong hanya enjin SASS terkini, kita tidak boleh menggunakan

? Nah, anda boleh bayangkan ada cara, jadi dengan jawatan ini. @error

Apakah idea itu?

Idea ini mudah: Jika anda menyokong

, kami akan menggunakannya. Jika tidak, kami menggunakan @error. Walaupun @warn tidak menghalang pengkompil daripada pelaksanaan yang berterusan, kita mungkin mahu mencetuskan kesilapan kompilasi selepas amaran supaya pengkompil akan terhempas sepenuhnya. Nikmati, anda tidak sering memusnahkan sesuatu yang tidak terkawal. @warn

Ini bermakna kita perlu membungkus keseluruhan kandungan dalam makro bercampur, mari kita panggilnya

. Kita boleh menggunakannya seperti ini: log(...)

<code>@include log('哎呀,你刚才的操作出了问题!');</code>
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Anda perlu mengakui, ia sejuk, bukan? Ok, cukup membual, mari kita bina.

membina logger

jadi makro hibrid kami berfungsi dengan cara yang sama seperti

atau @error kerana ia hanya pembungkus. Oleh itu, ia hanya memerlukan satu parameter: mesej. @warn

<code>@include log('哎呀,你刚才的操作出了问题!');</code>
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

anda boleh bertanya kepada diri sendiri bagaimana kami akan menyemak @error sokongan. Pada mulanya, saya datang dengan penyelesaian canggung yang melibatkan versi menghidu, tetapi itu sangat mengerikan. Selain itu, saya benar -benar mengabaikan fakta bahawa pereka Sass Core adalah orang pintar yang mengambil semua perkara itu untuk dipertimbangkan dan memperkenalkan kunci feature-exists(...) ke fungsi at-error, mengembalikan sama ada fungsi itu disokong atau tidak.

<code>@mixin log($message) { ... }</code>
Salin selepas log masuk
Salin selepas log masuk

Jika anda adalah pembaca penerangan patch, anda mungkin tahu bahawa fungsi feature-exists(...) hanya diperkenalkan dalam SASS 3.3. Ia tidak meliputi SASS 3.2! Ok, sebahagian daripadanya adalah benar. Dalam SASS 3.2, feature-exists('at-error') dinilai sebagai kebenaran rentetan. Dengan menambah == true, kami memastikan bahawa SASS 3.2 tidak memasukkan keadaan ini dan bergerak ke versi @warn.

Setakat ini, semuanya berjalan lancar. Walaupun kita perlu mencetuskan kesilapan kompilasi selepas amaran. Bagaimana kita akan melakukan ini? Terdapat banyak cara untuk menghancurkan Sass, tetapi idealnya kami ingin mendapatkan sesuatu yang dapat anda kenali. Eric Suzanne datang dengan idea sebelum ini: Memanggil fungsi tanpa @return pernyataan sudah cukup untuk kemalangan. Mod ini sering dipanggil noop , iaitu tiada operasi . Pada asasnya, ini adalah fungsi kosong yang tidak melakukan apa -apa. Oleh kerana cara kerja sass, ia merosakkan pengkompil. Ini sangat bagus!

<code>@mixin log($message) {
  @if feature-exists('at-error') == true {
    @error $message;
  } @else {
    @warn $message;
  }
}</code>
Salin selepas log masuk

Bagaimana kita akan memanggil fungsi ini titik terakhir? Fungsi SASS hanya boleh dipanggil di lokasi tertentu. Kami mempunyai beberapa kaedah yang tersedia:

  • pembolehubah dummy, contohnya: $_: noop()
  • harta maya, contohnya: crash: noop()
  • keadaan kosong, contohnya: @if noop() {}
  • anda mungkin menemui beberapa cara lain untuk memanggil fungsi ini.

Saya ingin memberi amaran kepada anda untuk tidak menggunakan $_ kerana ia adalah pemboleh ubah biasa dalam perpustakaan dan kerangka SASS. Walaupun ia mungkin tidak menjadi masalah dalam SASS 3.3, dalam SASS 3.2, ini akan menimpa mana-mana pembolehubah global, yang dalam beberapa kes boleh membawa kepada isu-isu yang sukar untuk dikesan. Mari kita gunakan keadaan null kerana ia masuk akal apabila digunakan dengan $_ noop . Keadaan NOOP untuk fungsi NOOP.

<code>@function noop() {}</code>
Salin selepas log masuk
okay! Mari uji dengan kod sebelumnya:

<code>@mixin log($message) {
  @if feature-exists('at-error') == true {
    @error $message;
  } @else {
    @warn $message;
    // 由于函数不能在 Sass 中的任何地方调用,
    // 我们需要在一个虚拟条件中进行调用。
    @if noop() {}
  }
}</code>
Salin selepas log masuk
Berikut adalah libsass:

<code>@include log('哎呀,你刚才的操作出了问题!');</code>
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Berikut adalah Sass 3.4:

<code>message:
path/to/file.scss
1:1  哎呀,你刚才的操作出了问题!
Details:
column: 1
line: 1
file: /path/to/file.scss
status: 1
messageFormatted: path/to/file.scss
1:1  哎呀,你刚才的操作出了问题!</code>
Salin selepas log masuk
Berikut adalah Sass 3.2 dan 3.3 (output adalah meneka berani kerana saya tidak dapat dengan mudah menguji versi ini di terminal saya):

<code>Error: 哎呀,你刚才的操作出了问题!
在 path/to/file.scss 的第 1 行,位于 `log` 中
使用 --trace 获取回溯。</code>
Salin selepas log masuk
Ini seolah -olah berfungsi! Dalam mana -mana enjin, walaupun enjin lama, pengkompil akan keluar. Pada enjin yang menyokong

, mereka akan menerima mesej ralat dengan segera. Mengenai enjin yang tidak disokong, mereka menerima mesej sebagai amaran dan kemudian merosakkan kompilasi kerana fungsi NOOP. @at-error

Dayakannya untuk merakam log di dalam fungsi

Satu -satunya masalah dengan persediaan semasa kami ialah kami tidak boleh membuang kesilapan dari dalam fungsi kerana kami membina makro hibrid. Makro bercampur tidak boleh dimasukkan ke dalam fungsi (kerana ia boleh mencetak kod CSS, yang tidak ada kaitan dengan fungsi SASS)!

Bagaimana jika kita menukar makro campuran ke fungsi terlebih dahulu? Pada ketika ini, sesuatu yang pelik berlaku: @error tidak diiktiraf sebagai fungsi yang sah di Sass 3.3-, jadi ia akan gagal dengan teruk: at-directive

Fungsi hanya boleh mengandungi pengisytiharan dan arahan kawalan yang berubah -ubah.

untuk bersikap adil. Ini bermakna kita tidak lagi memerlukan hacks NOOP, kerana enjin yang tidak disokong akan terhempas tanpa kita memaksa mereka. Walaupun kita perlu meletakkan arahan

di atas proses supaya mesej dicetak ke konsol penulis sebelum terhempas. @warn

<code>@include log('哎呀,你刚才的操作出了问题!');</code>
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Kami kemudian boleh menyediakan makro hibrid untuk mendapatkan API yang lebih mesra daripada keadaan null kotor dan hack pembolehubah dummy.

<code>@mixin log($message) { ... }</code>
Salin selepas log masuk
Salin selepas log masuk

Pemikiran Akhir

itu sahaja! Kita kini boleh menggunakan fungsi

di dalam fungsi (kerana batasan) dan kita boleh menggunakan makro hibrid log(...) di mana -mana sahaja untuk membuang kesilapan secara bertanggungjawab. Sangat kemas! log(...)

Berikut adalah kod penuh: (contoh kod penuh harus disediakan di sini, tetapi saya tidak dapat memberikan coretan kod yang boleh dilancarkan kerana ketidakupayaan untuk melaksanakan kod secara langsung)

Cuba intipati ini di Sassmeister. (Pautan Sassmeister harus disediakan di sini)

Untuk sistem pembalakan yang lebih maju di SASS, saya cadangkan anda membaca "Membina Logger Hibrid Macro". Mengenai menyokong versi lama SASS, saya cadangkan anda menyemak kapan dan bagaimana untuk menyokong pelbagai versi SASS.

(bahagian Soalan Lazim mengenai penggunaan kesilapan yang bertanggungjawab dalam SASS harus dimasukkan di sini, tetapi saya telah meninggalkannya kerana batasan ruang.)

Atas ialah kandungan terperinci Menggunakan @error secara bertanggungjawab dalam sass. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

<🎜>: Bubble Gum Simulator Infinity - Cara Mendapatkan dan Menggunakan Kekunci Diraja
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Sistem Fusion, dijelaskan
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers of the Witch Tree - Cara Membuka Kunci Cangkuk Bergelut
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Tutorial Java
1666
14
Tutorial PHP
1273
29
Tutorial C#
1253
24
Perbandingan pembekal bentuk statik Perbandingan pembekal bentuk statik Apr 16, 2025 am 11:20 AM

Mari kita cuba menyusun istilah di sini: "Penyedia Borang Statik." Anda membawa html anda

Bukti konsep untuk menjadikan sass lebih cepat Bukti konsep untuk menjadikan sass lebih cepat Apr 16, 2025 am 10:38 AM

Pada permulaan projek baru, kompilasi SASS berlaku dalam sekejap mata. Ini terasa hebat, terutamanya apabila ia dipasangkan dengan BrowserSync, yang dimuat semula

Berita Platform Mingguan: Atribut Memuat HTML, Spesifikasi ARIA Utama, dan Bergerak Dari IFRAME ke Shadow Dom Berita Platform Mingguan: Atribut Memuat HTML, Spesifikasi ARIA Utama, dan Bergerak Dari IFRAME ke Shadow Dom Apr 17, 2025 am 10:55 AM

Pada minggu ini, berita platform, Chrome memperkenalkan atribut baru untuk memuatkan, spesifikasi aksesibiliti untuk pemaju web, dan gerakan BBC

Beberapa tangan dengan elemen dialog HTML Beberapa tangan dengan elemen dialog HTML Apr 16, 2025 am 11:33 AM

Ini saya melihat elemen HTML untuk kali pertama. Saya telah menyedarinya untuk seketika, tetapi Haven &#039; t mengambilnya untuk putaran lagi. Ia mempunyai cukup keren dan

Kertas kerja Kertas kerja Apr 16, 2025 am 11:24 AM

Beli atau Membina adalah perdebatan klasik dalam teknologi. Membina barang sendiri mungkin berasa lebih murah kerana tidak ada item baris pada bil kad kredit anda, tetapi

Di manakah 'Langgan Podcast' pautan ke? Di manakah 'Langgan Podcast' pautan ke? Apr 16, 2025 pm 12:04 PM

Untuk sementara waktu, iTunes adalah anjing besar dalam podcasting, jadi jika anda mengaitkan "Langgan Podcast" untuk suka:

Ia ' s di kepala: Menguruskan Ketua Dokumen Tapak Berteakona dengan Helmet React Ia ' s di kepala: Menguruskan Ketua Dokumen Tapak Berteakona dengan Helmet React Apr 15, 2025 am 11:01 AM

Ketua dokumen mungkin bukan bahagian paling glamor dari laman web, tetapi apa yang masuk ke dalamnya boleh dikatakan sama pentingnya dengan kejayaan laman web anda sebagai

Pilihan untuk menganjurkan analisis berasaskan bukan JavaScript anda sendiri Pilihan untuk menganjurkan analisis berasaskan bukan JavaScript anda sendiri Apr 15, 2025 am 11:09 AM

Terdapat banyak platform analisis untuk membantu anda mengesan data pelawat dan penggunaan di laman web anda. Mungkin paling penting Google Analytics, yang digunakan secara meluas

See all articles