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

Arahan yang manakah digunakan untuk mengesan ralat dalam SASS?

WBOY
Lepaskan: 2023-09-07 08:29:02
ke hadapan
1238 orang telah melayarinya

哪个指令用于检测 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";
Salin selepas log masuk

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);
}
Salin selepas log masuk

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 -----------------------------------------------^"
}
Salin selepas log masuk
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);
}
Salin selepas log masuk

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 ----------------------^"
}
Salin selepas log masuk

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;
Salin selepas log masuk

Output

Apabila dilaksanakan, ia akan menghasilkan output berikut −

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

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!

sumber:tutorialspoint.com
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan