KURANG - Pengawal Mixin

Deskripsi

Jika Anda ingin mencocokkan nilai atau jumlah argumen sederhana pada ekspresi, maka Anda dapat menggunakan penjaga. Ini terkait dengan deklarasi mixin dan termasuk kondisi yang dilampirkan ke mixin. Setiap mixin akan memiliki satu atau lebih penjaga yang dipisahkan dengan koma; pelindung harus diapit tanda kurung. LESS menggunakan mixin yang dilindungi, bukanif/else pernyataan dan melakukan perhitungan untuk menentukan mixin yang cocok.

Tabel berikut menjelaskan berbagai jenis pelindung mixin beserta penjelasannya.

Sr.No.	Jenis & Deskripsi
1	Operator Perbandingan Pelindung Anda dapat menggunakan operator perbandingan (=) untuk membandingkan angka, string, pengenal, dll.
2	Penjaga Operator Logis Anda dapat menggunakan kata kunci dan untuk mengatasi operator logika dengan penjaga.
3	Ketik Memeriksa Fungsi Ini berisi fungsi built-in untuk menentukan tipe nilai untuk mixin yang cocok.
4	Mixin Bersyarat LESS menggunakan fungsi default untuk mencocokkan mixin dengan pencocokan pencampuran lainnya.

Contoh

Contoh berikut menunjukkan penggunaan penjaga mixin di file LESS -

<!doctype html>
   <head>
      <title>Mixin Guards</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

Sekarang, buat file style.less .

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

Anda dapat mengompilasi style.less ke style.css dengan menggunakan perintah berikut -

lessc style.less style.css

Jalankan perintah di atas; itu akan membuat file style.css secara otomatis dengan kode berikut -

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

Keluaran

Ikuti langkah-langkah ini untuk melihat cara kerja kode di atas -

Simpan kode html di atas di file mixin-guard.html mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.