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

Menggunakan @error secara bertanggungjawab dalam sass

William Shakespeare
Lepaskan: 2025-02-24 09:25:38
asal
266 orang telah melayarinya

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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan