Rumah  >  Artikel  >  hujung hadapan web  >  Arahan yang manakah digunakan untuk mengesan ralat dalam SASS?

Arahan yang manakah digunakan untuk mengesan ralat dalam SASS?

WBOY
WBOYke hadapan
2023-09-07 08:29:021205semak imbas

哪个指令用于检测 SASS 中的错误?

Dalam SASS, arahan ialah simbol khas bermula dengan aksara "@". Pelbagai arahan digunakan dalam kod SCSS untuk mengarahkan pengkompil memproses kod dengan cara tertentu.

Dalam tutorial ini, kita akan belajar menggunakan arahan @error dan @debug untuk membuang ralat atau kod nyahpepijat masing-masing.

@arahan ralat dalam SASS

Arahan ralat diwakili sebagai '@error', kita boleh menggunakannya apabila kita perlu membuang ralat. Sebagai contoh, jika syarat tertentu tidak dipenuhi, kita perlu membuang ralat.

Tatabahasa

Pengguna boleh menggunakan arahan ‘@error’ mengikut sintaks berikut untuk mengesan ralat dalam SASS.

@error "error message";

Dalam sintaks di atas, mesej ralat digantikan dengan ralat sebenar, yang perlu kami paparkan dalam output.

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Dalam contoh di bawah, kami telah mencipta objek "Warna" dalam SASS yang mengandungi warna berbeza dan kod heksnya.

Selain itu, kami mencipta fungsi changeStyle(), yang mengambil warna sebagai parameter. Ia menyemak sama ada peta mengandungi warna parameter yang diluluskan sebagai kunci. Jika ya, ia mengembalikan kod heks warna. Jika tidak, ia mengembalikan ralat.

Kami memanggil fungsi changeStyle() dengan menghantar 'biru' sebagai parameter, pengguna boleh melihat ralat dalam terminal semasa menyusun SCSS.

$colors: (
   green: #00ff00,
   white: #ffffff,
);
@function changeStyle($color) {
   @if map-has-key($colors, $color) {
      @return map-get($colors, $style);
   }
   @error "Color is not included in the style: '#{$style}'.";
}
.container {
   style: changeStyle(blue);
}

Output

Apabila dilaksanakan, ia akan menghasilkan output berikut −

=> changed: C:\Data E\web devlopmentodedemo\scss\style.scss
{
   "status": 1,
   "file": "C:/Data E/web devlopment/nodedemo/scss/style.scss",
   "line": 11,
   "column": 60,
   "message": "Undefined variable: "$style".",
   "formatted": "Error: Undefined variable: "$style". on line
   11 of scss/style.scss,
   {$style}'. ";\r -----------------------------------------------^"
}
Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Dalam contoh di bawah, fungsi divid() mengambil dua nilai sebagai parameter. Jika hujah kedua sama dengan sifar, kami membuang ralat. Jika tidak, kami mengembalikan hasil pembahagian nombor itu.

// writing an scss code to use @error directive
@function divide($a, $b) {
   @if $b == 0 {
      @error "Division by zero is not allowed.";
   }
   @return $a / $b;
}
.one {
   width: divide(10, 2);
}
.two {
   width: divide(10, 1);
}
.three {
   width: divide(10, 0);
}

Output

Dalam output, pengguna boleh melihat ralat.

rreeee

Peranan arahan @debug dalam SASS

Arahan

‘@debug’ digunakan untuk nyahpepijat kod SASS. Dengan menyahpepijat kod, pembangun boleh mengetahui lokasi sebenar ralat dalam kod. Sebagai contoh, kita boleh mencetak nilai pembolehubah dengan menyahpepijat kod dan menangkap ralat secara manual.

Tatabahasa

Pengguna boleh menggunakan arahan "@debug" SASS mengikut sintaks berikut.

=> changed: C:\Data E\web devlopmentodedemo\scss\style.scss
{
   "status": 1,
   "file": "C:/Data E/web devlopment/nodedemo/scss/style.scss",
   "line": 4,
   "column": 12,
   "message": "Division by zero is not allowed.",
   "formatted": "Error: Division by zero is not allowed.  on
   line 4 of scss/style.scss, in file allowed. "; \r ----------------------^"
}

Dalam sintaks di atas, 'var-name' digantikan dengan nama pembolehubah sebenar untuk mencetak nilainya untuk kod nyahpepijat.

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Dalam contoh di bawah, kami menggunakan arahan @debug untuk menyahpepijat kod SASS. Kami menentukan pembolehubah ketinggian dan sempadan dan menyimpan nilai masing-masing.

Selepas itu, kami menggunakan arahan @debug untuk mencetak nilai pembolehubah ketinggian dan sempadan, yang pengguna boleh perhatikan dalam output.

@debug $var-name;

Output

Apabila dilaksanakan, ia akan menghasilkan output berikut −

$height: 45rem;
$border: 2px, solid, blue;
div {
   @debug $height;
   @debug $border;
}

Pengguna belajar menggunakan arahan @error dan @debug untuk menangkap ralat semasa menyusun kod SASS. Kita boleh membuang ralat menggunakan arahan @error dan menangkap ralat dengan menyahpepijat kod menggunakan arahan @debug.

Atas ialah kandungan terperinci Arahan yang manakah digunakan untuk mengesan ralat dalam SASS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam