cari
Rumahhujung hadapan webtutorial cssMenggunakan @error secara bertanggungjawab dalam sass

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>
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>

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>

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>

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>
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>
Berikut adalah libsass:

<code>@include log('哎呀,你刚才的操作出了问题!');</code>
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>
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>
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>
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>

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
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
@KeyFrames CSS: Trik yang paling banyak digunakan@KeyFrames CSS: Trik yang paling banyak digunakanMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityAndPowerIncreatingSmoothcsSanimations.KeyTrickSinclude: 1) definisiMoothTransitionSbetweenStates, 2) AnimatingMultiplePropertiSti

Kaunter CSS: Panduan Komprehensif untuk Penomboran AutomatikKaunter CSS: Panduan Komprehensif untuk Penomboran AutomatikMay 07, 2025 pm 03:45 PM

Csscountersareusedtomanageautomaticnumberinginwebdesigns.1) mereka yang boleh dimanfaatkan, listitems, andcustomnumbering.2) AdvancedusesIndenestedNumberingsystems.3) cabaran yang terkandung di dalam cabaran

Bayang-bayang tatal moden menggunakan animasi yang didorong oleh tatalBayang-bayang tatal moden menggunakan animasi yang didorong oleh tatalMay 07, 2025 am 10:34 AM

Menggunakan bayang -bayang skrol, terutamanya untuk peranti mudah alih, adalah sedikit UX yang telah diliputi oleh Chris sebelum ini. Geoff merangkumi pendekatan yang lebih baru yang menggunakan harta animasi-masa. Berikut adalah satu lagi cara.

Mengkaji semula peta imejMengkaji semula peta imejMay 07, 2025 am 09:40 AM

Mari kita lari melalui penyegaran cepat. Peta imej tarikh kembali ke HTML 3.2, di mana, pertama, peta sisi pelayan dan kemudian peta sisi klien yang ditakrifkan di atas imej menggunakan elemen peta dan kawasan.

Negeri Devs: Tinjauan untuk Setiap PemajuNegeri Devs: Tinjauan untuk Setiap PemajuMay 07, 2025 am 09:30 AM

Kajian Negeri Devs kini dibuka untuk penyertaan, dan tidak seperti tinjauan sebelumnya ia meliputi segala -galanya kecuali kod: kerjaya, tempat kerja, tetapi juga kesihatan, hobi, dan banyak lagi. 

Apakah grid CSS?Apakah grid CSS?Apr 30, 2025 pm 03:21 PM

CSS Grid adalah alat yang berkuasa untuk mewujudkan susun atur web yang rumit dan responsif. Ia memudahkan reka bentuk, meningkatkan kebolehcapaian, dan menawarkan lebih banyak kawalan daripada kaedah yang lebih lama.

Apakah CSS Flexbox?Apakah CSS Flexbox?Apr 30, 2025 pm 03:20 PM

Artikel membincangkan CSS Flexbox, kaedah susun atur untuk penjajaran yang cekap dan pengedaran ruang dalam reka bentuk responsif. Ia menerangkan penggunaan Flexbox, membandingkannya dengan grid CSS, dan butiran sokongan penyemak imbas.

Bagaimanakah kita boleh membuat laman web kami responsif menggunakan CSS?Bagaimanakah kita boleh membuat laman web kami responsif menggunakan CSS?Apr 30, 2025 pm 03:19 PM

Artikel ini membincangkan teknik untuk membuat laman web responsif menggunakan CSS, termasuk tag Meta Viewport, grid fleksibel, media cecair, pertanyaan media, dan unit relatif. Ia juga meliputi menggunakan grid CSS dan Flexbox bersama -sama dan mengesyorkan rangka kerja CSS

See all articles

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!

Alat panas

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

MinGW - GNU Minimalis untuk Windows

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.