Apakah kegunaan Escape dalam KURANG?

Dalam KURANG, "melarikan diri" membolehkan kami menggunakan rentetan sewenang-wenangnya sebagai harta atau nilai berubah. Kadangkala, kami mungkin menggunakan aksara atau simbol khas dalam kod KURANG, yang boleh menyebabkan masalah semasa menyusun kod. Melarikan diri adalah teknik yang membantu mencegah masalah sedemikian dengan merangkum watak dan simbol khas ini dalam bekas khas.

Dalam tutorial ini, kami akan meneroka mengapa melarikan diri diperlukan untuk KURANG dan cara ia berfungsi.

tatabahasa

Pengguna boleh menggunakan "escape" dalam KURANG mengikut sintaks berikut.

@property_name: ~"anything";

Dalam sintaks di atas, kami menggunakan tilde (~) sebelum rentetan yang perlu dilepaskan. Tilde (~) memberitahu KURANG untuk memproses rentetan sebagaimana adanya, tanpa membuat sebarang perubahan padanya kecuali memasukkan sebarang pembolehubah dalam rentetan.

Contoh 1: Melarikan diri daripada aksara khas dalam nilai sifat CSS

Dalam contoh di bawah, kami menggunakan operator ~ untuk melepaskan petikan tunggal dalam URL dalam @my-bg.

Dalam output, pengguna boleh melihat URL yang betul dalam CSS yang disusun. Petikan di sekitar URL akan menyebabkan ralat kompilasi jika tidak dielakkan.

@my-bg: ~"url('https://example.com/image.jpg')";
.background {
   background-image: @my-bg;
}

Output

.background {
   background-image: url('https://example.com/image.jpg');
}

Contoh 2: Menggunakan pembolehubah dalam pertanyaan media

Dalam contoh di bawah, kami mentakrifkan pembolehubah @viewport-max-width dengan nilai 600px. Kami menggunakan melarikan diri untuk memastikan bahawa nilai @viewport-max-width dihantar kepada kod CSS seperti sedia ada, tanpa pemprosesan KURANG.

NOTA: Sila ambil perhatian bahawa setakat KURANG 3.5, melarikan diri tidak diperlukan dalam banyak kes di mana pembolehubah digunakan dalam pertanyaan media. Dalam kes ini, kita hanya boleh merujuk pembolehubah menggunakan sintaks @{}.

Dalam output, pengguna boleh melihat bahawa output dua contoh di bawah adalah sama, yang menyebabkan pertanyaan media menyasarkan skrin dengan lebar maksimum 600 piksel.

@viewport-max-width: 600px;
@media screen and (max-width: ~"@{viewport-max-width}") {
   .my-class {
      font-size: 1.2rem;
   }
}
In LESS 3.5+, the above example can be written without the need for escaping as follows: 
@viewport-max-width: 600px; 
@media screen and (max-width: @{viewport-max-width}) { 
   .my-class { 
      font-size: 1.2rem; 
   } 
}

Output

@media screen and (max-width: 600px) {
   .my-class {
      font-size: 1.2rem;
   }
}

Contoh 3: Melarikan diri daripada aksara khas dalam nilai yang kurang berubah

Dalam contoh di bawah, kami menggunakan sintaks tilde dan petikan berganda ~"..." untuk mentakrifkan pembolehubah @my-string sebagai rentetan arbitrari. Rentetan mengandungi sepasang petikan berganda, yang biasanya menyebabkan masalah apabila KURANG disusun.

Dalam output, pengguna boleh melihat bahawa nilai @my-string adalah output kerana Ini adalah rentetan "dipetik" saya tanpa sebarang masalah kerana melarikan diri.

@my-string: ~"This is my "quoted" string";
.my-class {
   content: @my-string;
}

Output

.my-class {
   content: This is my "quoted" string;
}

Contoh 4: Menggunakan fungsi Kurang dengan nilai yang dilepaskan

Dalam contoh di bawah, kami mentakrifkan pembolehubah @warna-saya yang mempunyai nilai rentetan arbitrari yang mewakili warna RGBA. Nilai itu dilarikan menggunakan aksara tilde diikuti dengan petikan berganda.

Kemudian, kami menggunakan fungsi LESS darken() untuk menggelapkan warna sebanyak 10% sebagai warna latar belakang elemen .my-class. Fungsi ini memahami nilai rentetan yang terlepas dan menggunakan pengiraan dengan sewajarnya.

Dalam output, pengguna dapat melihat bahawa warna asal (rgba(255, 0, 0, 0.5)) telah digelapkan sebanyak 10% kepada warna baharu (rgba(204, 0, 0, 0.5)) dan digunakan sebagai . Warna latar belakang elemen kelas saya.

@my-color: ~"rgba(255, 0, 0, 0.5)";
.my-class {
   background-color: darken(@my-color, 10%);
}

Output

.my-class {
   background-color: rgba(204, 0, 0, 0.5);
}

Pengguna belajar menggunakan melarikan diri dalam KURANG. Pada asasnya, melarikan diri dalam LESS ialah teknik penting yang membolehkan pembangun menulis kod CSS yang lebih cekap dan boleh diselenggara.

Secara keseluruhannya, dengan menggunakan sintaks dan fungsi escape, pembangun boleh memastikan bahawa aksara khas dan kata kunci simpanan dikodkan dengan betul, sekali gus menghalang ralat penyusunan dan memastikan bahawa output akhir adalah betul.

Atas ialah kandungan terperinci Apakah kegunaan Escape dalam KURANG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!