KURANG - Pengawal CSS

Deskripsi

Penjaga digunakan untuk mencocokkan nilai sederhana atau sejumlah argumen pada ekspresi. Ini diterapkan ke pemilih CSS. Ini adalah sintaks untuk mendeklarasikan mixin dan memanggilnya segera. Untuk berhasil mengeluarkan fileifjenis pernyataan; bergabunglah dengan fitur ini&, yang memungkinkan Anda mengelompokkan beberapa penjaga.

Contoh

Contoh berikut menunjukkan penggunaan css jaga di file KURANG -

css_guard.htm

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

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
      </div>
		
      <div class = "style">
         <h3>The largest Tutorials Library on the web.</h3>
      </div>
   </body>
</html>

Selanjutnya, buat file style.less .

style.less

@usedScope: global;
.mixin() {
   @usedScope: mixin;
   .cont when (@usedScope = global) {
      background-color: red;
      color: black;
   }
   
   .style when (@usedScope = mixin) {
      background-color: blue;
      color: white;
   }
   @usedScope: mixin;
}
.mixin();

Anda dapat mengompilasi file 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

.style {
   background-color: blue;
   color: white;
}

Keluaran

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

Simpan kode html di atas di file css_guard.htm mengajukan.
Buka file HTML ini di browser, output berikut akan ditampilkan.