Mengesahkan Input dalam Sass Mixins dan Fungsi

mata teras

Mengesahkan input dalam sass mixin dan fungsi adalah penting, memastikan bahawa kod masuk adalah jenis dan format data yang betul, membantu mencegah kesilapan dan pepijat, dan menjadikan kod lebih mudah untuk debug dan mengekalkan.
SASS menyediakan beberapa fungsi terbina dalam untuk pengesahan input, seperti
• , type-of(), dan unit(). Fungsi ini boleh digunakan untuk memeriksa jenis dan unit data input, dan ralat akan dibuang jika input tidak memenuhi kriteria yang diharapkan. unitless()
Fungsi pengesahan tersuai boleh dibuat dalam SASS untuk pemeriksaan pengesahan yang lebih kompleks. Ini melibatkan menentukan fungsi baru menggunakan arahan
• dan mengembalikan nilai berdasarkan pemeriksaan pengesahan menggunakan arahan @function. @return
Jika pengesahan input dalam sass mixin atau fungsi gagal, ralat dilemparkan dan penyusunan kod SASS dihentikan. Arahan
• boleh digunakan untuk membuang mesej ralat tersuai, memberikan maklumat terperinci mengenai sifat ralat dan bagaimana untuk memperbaiki ralat. @error

Apabila menulis sass dan menggunakannya oleh orang lain, mereka mungkin membuat kesilapan semasa menggunakan kod anda. Malah, secara jujur, apabila saya menulis Sass dan menggunakannya beberapa hari (atau bahkan jam kemudian), saya membuat kesilapan dalam kod saya sendiri. Anda juga mungkin. Nasib baik, SASS mempunyai banyak fungsi yang dapat membantu kami mengesahkan pemaju input yang dimasukkan ke dalam SASS yang kami tulis.

Teknologi ini amat berguna untuk pasukan yang berkongsi Sass Mixin atau mengekalkan kit starter atau satu set mixin dan fungsi. Pemaju mempunyai dua pilihan apabila menggunakan perpustakaan SASS yang dikongsi: mereka boleh mengganggu satu sama lain melalui e -mel, sembang, ping, atau sebaliknya untuk bantuan dengan bantuan mixin adat, atau menggunakan dokumentasi terperinci yang termasuk pengesahan kod untuk membantu satu sama lain dengan mudah mengecualikan mereka. .

Sahkan nilai tunggal

Mixin dan fungsi mengambil parameter. Jika anda lulus kod kepada pemaju lain di tempat kerja atau menerbitkan perpustakaan sumber terbuka, anda perlu memastikan parameter sepadan dengan niat anda. Fungsi ini berguna untuk mengesahkan pembolehubah dalam parameter.

Pastikan pembolehubah wujud:

variable-exists()

Jika fungsi atau mixin anda bergantung kepada pemboleh ubah yang ditentukan oleh pemaju, gunakan fungsi yang sesuai untuk memastikan pembolehubah wujud. Fungsi ini mengembalikan benar atau palsu berdasarkan sama ada pembolehubah telah dibuat dan ditakrifkan.

variable-exists() Walau bagaimanapun, pilihan yang lebih baik daripada bergantung kepada pemaju untuk menetapkan pembolehubah global dengan betul adalah untuk memasukkan pembolehubah lalai ini di perpustakaan anda:

@mixin create-font-size() {
  @if variable-exists(base-font) {
    font-size: $base-font;
  } @else {
    @error "请定义变量 `$base-font`。";
  }
  @if variable-exists(line-height) {
    line-height: $line-height;
  } @else {
    @error "请定义变量 `$line-height`。";
  }
}

// 开发者的代码
$base-font: 18px;
$line-height: 1.5;
.element {
  @include create-font-size;
}

Jenis Nilai Semak:

// 你的插件：
$base-font: 18px !default;
$line-height: 1.5 !default;

@mixin create-font-size() {
  //等等...
}

// 开发者的代码：
$base-font: 16px;
p {
  @include create-font-size();
}

Jika anda perlu mengetahui jenis nilai yang diwakili oleh pembolehubah, sila gunakan type-of(). Fungsi ini akan mengembalikan salah satu rentetan berikut:

• String
• warna
• nombor
• bool
• null
Senarai
peta

Ini berguna untuk mengesahkan jenis input tertentu. Anda boleh memastikan bahawa pemaju hanya melewati nilai -nilai kepada mixin yang mencipta saiz:

@mixin create-font-size() {
  @if variable-exists(base-font) {
    font-size: $base-font;
  } @else {
    @error "请定义变量 `$base-font`。";
  }
  @if variable-exists(line-height) {
    line-height: $line-height;
  } @else {
    @error "请定义变量 `$line-height`。";
  }
}

// 开发者的代码
$base-font: 18px;
$line-height: 1.5;
.element {
  @include create-font-size;
}

anda juga boleh menggunakan

untuk memastikan warna campuran warna hanya memproses warna: type-of()

// 你的插件：
$base-font: 18px !default;
$line-height: 1.5 !default;

@mixin create-font-size() {
  //等等...
}

// 开发者的代码：
$base-font: 16px;
p {
  @include create-font-size();
}

Jika anda memerlukan pemaju untuk membuat peta tetapan konfigurasi untuk tema, anda boleh memastikan mereka mempunyai peta yang sah:

@mixin size($height, $width: $height) {
  @if type-of($height) == number {
    height: $height;
  } @else {
    @warn "确保 `$height` 是一个数字。";
  }
  @if type-of($width) == number {
    width: $width;
  } @else {
    @warn "确保 `$width` 是一个数字。";
  }
}

unit untuk mengesahkan nombor:

unit()

Kadang -kadang, operasi matematik dalam fungsi atau mixin memerlukan unit tertentu dalam parameter mereka. Anda boleh menggunakan

untuk mengesahkan bahawa nilai mempunyai unit yang betul. Sebagai contoh, anda mungkin menggunakan mixin untuk membuat dimensi unit piksel dan REM. (unit() Perhatikan bahawa anda lebih baik menjalankan pakej dengan tugas untuk ini, tetapi jika anda perlu menyimpannya dalam sass, terus membaca. )

@function color-fade($color) {
  @if type-of($color) == 'color' {
    @return rgba($color, .8);
  } @else {
    @warn "确保你将有效的颜色传递给 color-fade() 函数。";
  }
}

Sahkan senarai dan peta

kita telah melihat cara menggunakan

untuk memastikan bahawa pembolehubah mengandungi senarai atau peta. Kami juga boleh menguji dua perkara penting: sama ada nilai -nilai dalam senarai, dan sama ada kunci berada dalam peta. type-of()

Cari nilai dalam senarai:

index() Fungsi

akan memberitahu anda sama ada nilai itu terdapat dalam senarai. Secara teknikal, ia akan mengembalikan kedudukan nilai dalam senarai (nombor) atau null. Ia bukan fungsi Boolean yang benar, tetapi untuk tujuan kita di sini, nilai -nilai yang benar dan palsu adalah mencukupi. index()

Fungsi ini mengambil dua parameter: senarai dan nilai yang anda ingin cari dalam senarai. Fungsi ini berguna untuk menguji pengukuran nilai -nilai tertentu dalam mixin. Jika kita mempunyai campuran yang mengeluarkan padding atau pengiraan margin menggunakan CSS, kanan, bawah, bawah, atau kiri, kita ingin memastikan kita tidak cuba mengira nilai -nilai seperti permulaan, mewarisi, atau auto. index()

@mixin generate-theme($settings) {
  @if type-of($settings) == 'map' {
    // 此处输出
  } @else {
    @warn "确保 `$settings` 是一个 Sass 映射。";
  }
}

Pastikan peta mempunyai kunci:

map-has-key()

Jika anda menyemak kunci khusus dalam peta, anda boleh menggunakan fungsi

untuk memastikan bahawa kunci wujud dalam peta yang anda periksa. Ini akan sangat berguna jika anda menggunakan map-has-key() pemetaan dan pertanyaan media mixin: $breakpoints

$rem-size: 16px !default;

@mixin px-rem($property, $value) {
  @if unit($value) == 'px' {
    #{$property}: $value;
    #{$property}: $value / $rem-size * 1rem;
  } @elseif unit($value) == 'rem' {
    #{$property}: $value * $rem-size / 1rem;
    #{$property}: $value;
  } @else {
    @warn "确保 `$value` 以 px 或 rem 为单位。";
  }
}

Sahkan mixin dan fungsi

Kadang -kadang anda akan menulis mixin atau fungsi yang bergantung kepada campuran atau fungsi yang sedia ada atau perpustakaan SASS yang lain. Mari kita kemas kini

mixin dari contoh sebelumnya untuk bergantung pada perpustakaan Sass Breakpoint. Kita boleh memanjangkannya seperti ini: bp()

$rem-size: 16px !default;

@mixin margin-rem($values...) {
  $output: ();
  @each $value in $values {
    @if index(auto inherit initial 0, $value) {
      $output: append($output, $value);
    } @else {
      $output: append($output, $value / $rem-size * 1rem);
    }
  }
  margin: #{$output};
}

sekarang

mixin (lebih pendek dan menggunakan nilai dipetakan) akan menggunakan bp() mixin apabila ia wujud. Jika tidak, ia akan kembali ke kod Mixin pertanyaan media kami sendiri. breakpoint()

Terdapat fungsi sepadan yang dipanggil function-exists(). Anda boleh menggunakannya untuk menguji sama ada fungsi tertentu wujud. Jika anda mempunyai operasi matematik yang bergantung kepada fungsi yang tidak standard, anda boleh pastikan untuk memasukkan perpustakaan yang mengandungi fungsi. Kompas menambah fungsi pow() untuk matematik eksponen. Jika anda mencipta nisbah saiz fon yang memerlukan fungsi, uji:

@mixin create-font-size() {
  @if variable-exists(base-font) {
    font-size: $base-font;
  } @else {
    @error "请定义变量 `$base-font`。";
  }
  @if variable-exists(line-height) {
    line-height: $line-height;
  } @else {
    @error "请定义变量 `$line-height`。";
  }
}

// 开发者的代码
$base-font: 18px;
$line-height: 1.5;
.element {
  @include create-font-size;
}

Soalan pelaporan: @warn dan @error

Seperti yang anda perhatikan dalam contoh kod di atas, saya telah memberi perhatian untuk memberikan maklum balas yang baik kepada pemaju apabila pengesahan kami menangkap beberapa input yang salah. Kebanyakan masa, saya menggunakan

. Arahan ini menghantar mesej ke konsol pemaju, tetapi membolehkan pengkompil menyelesaikan larian. @warn

Kadang -kadang, apabila saya perlu menghentikan pengkompil sepenuhnya (tiada input atau fungsi tertentu, banyak output akan dipecahkan), saya menggunakan

untuk menghantar mesej ke konsol dan menghentikan pengkompil. @error 3

@warn Kesimpulan @error

tidak ada yang sempurna -mereka yang menggunakan kod kami tidak, dan bahkan diri kita sendiri selepas kami menulis kod kami selama beberapa jam! Inilah sebabnya sangat penting untuk membantu diri kita sendiri dan orang lain dengan mengesahkan input dalam mixin dan fungsi. Teknik -teknik ini bukan sahaja membantu anda menggunakan kod anda sendiri dengan lebih cekap, tetapi juga memudahkan pasukan untuk berkongsi dan mengekalkan perpustakaan SASS. Bagaimana anda menghalang kesilapan dalam SASS? Tolong beritahu kami dalam komen!

FAQs (FAQ) pada Mengesahkan Input dalam Sass Mixin dan Fungsi

Apakah tujuan mengesahkan input dalam sass mixin dan fungsi? Mengesahkan input dalam sass mixin dan fungsi adalah penting untuk mengekalkan integriti dan fungsi kod. Ia membantu memastikan bahawa jenis data yang diluluskan kepada mixin dan fungsi adalah betul dan mematuhi format yang diharapkan. Ini menghalang kesilapan dan pepijat dalam kod, menjadikannya lebih kuat dan boleh dipercayai. Ia juga menjadikan kod anda lebih mudah untuk debug dan mengekalkan, kerana anda dapat dengan cepat mengenal pasti dan membetulkan sebarang masalah dalam data input.

bagaimana saya mengesahkan input dalam sass mixin dan fungsi?

SASS menyediakan beberapa fungsi terbina dalam yang boleh anda gunakan untuk mengesahkan input dalam mixin dan fungsi. Ini termasuk

,

dan

, dll. Anda boleh menggunakan fungsi ini untuk memeriksa jenis dan unit data input, dan ralat akan dibuang jika input tidak memenuhi kriteria yang diharapkan. Sebagai contoh, anda boleh menggunakan fungsi

untuk memeriksa sama ada input adalah nombor, dan jika tidak, ralat akan dibuang. type-of()

Bolehkah saya membuat fungsi pengesahan tersuai dalam sass?

Ya, anda boleh membuat fungsi pengesahan tersuai dalam SASS. Ini sangat berguna jika anda perlu melakukan pemeriksaan pengesahan yang lebih kompleks yang tidak dapat dilaksanakan menggunakan fungsi terbina dalam. Untuk membuat fungsi pengesahan tersuai, hanya tentukan fungsi baru menggunakan arahan @function, dan kemudian gunakan arahan @return untuk mengembalikan nilai berdasarkan pemeriksaan pengesahan.

Apa yang berlaku jika pengesahan input gagal dalam sass mixin atau fungsi?

Jika pengesahan input dalam sass mixin atau fungsi gagal, ralat akan dibuang dan penyusunan kod SASS akan berhenti. Ini dapat membantu anda dengan cepat mengenal pasti dan membetulkan sebarang masalah dalam data input dan mencegah pepijat dan kesilapan dalam output CSS akhir.

Bagaimana saya mengendalikan kesilapan dalam sass mixin dan fungsi?

SASS menyediakan arahan @error, yang boleh anda gunakan untuk membuang mesej ralat tersuai apabila pengesahan input gagal. Ini amat berguna untuk menyahpepijat, kerana anda dapat memberikan maklumat terperinci tentang sifat kesilapan dan bagaimana untuk memperbaikinya.

Bolehkah saya menggunakan fungsi introspeksi SASS untuk pengesahan input?

Ya, fungsi introspeksi SASS boleh digunakan untuk pengesahan input. Fungsi -fungsi ini membolehkan anda menyemak jenis, unit, dan sifat lain dari data input, dan boleh digunakan bersamaan dengan arahan @error, yang boleh membuang mesej ralat tersuai apabila input tidak memenuhi kriteria yang diharapkan.

Apakah beberapa kes penggunaan biasa untuk mengesahkan input dalam sass mixin dan fungsi?

Sahkan bahawa input boleh digunakan dalam pelbagai senario dalam sass mixin dan fungsi. Sebagai contoh, anda mungkin ingin memastikan bahawa nilai warna yang diluluskan ke mixin adalah warna yang sah, atau nombor yang dihantar ke fungsi mempunyai unit yang betul. Pengesahan input juga boleh digunakan untuk menguatkuasakan kekangan atau peraturan tertentu dalam kod, seperti memastikan bahawa parameter tertentu sentiasa disediakan, atau nilai berada dalam julat tertentu.

Bolehkah saya menguji jika mixin wujud dalam sass?

Ya, anda boleh menggunakan fungsi mixin-exists() untuk menguji sama ada campuran itu wujud dalam sass. Jika mixin wujud, fungsi ini kembali benar, jika tidak palsu. Ini sangat berguna untuk mencegah kesilapan dalam kod anda, seperti yang anda boleh periksa sama ada Mixin wujud sebelum cuba memasukkannya.

Bagaimana saya menggunakan fungsi unit() untuk pengesahan input dalam sass?

Fungsi

dalam unit() dalam SASS mengembalikan unit nombor. Anda boleh menggunakan fungsi ini dalam pengesahan input untuk memeriksa sama ada nombor mempunyai unit yang betul. Sebagai contoh, anda mungkin ingin memastikan bahawa nilai panjang yang diluluskan ke mixin berada dalam piksel, atau nilai masa yang diluluskan kepada fungsi dalam beberapa saat.

Apakah beberapa amalan terbaik untuk mengesahkan input dalam sass mixin dan fungsi?

Beberapa amalan terbaik untuk mengesahkan input dalam mixin dan fungsi SASS termasuk: Sentiasa mengesahkan data input; Mesej ralat; dan menguji kod anda dengan teliti untuk memastikan pemeriksaan pengesahan berfungsi dengan baik. @error

Atas ialah kandungan terperinci Mengesahkan Input dalam Sass Mixins dan Fungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!