KURANG - Mengimpor

Deskripsi

Ini digunakan untuk mengimpor konten file LESS atau CSS.

Contoh

Contoh berikut menunjukkan penggunaan mengimpor dalam file LESS -

<html>
   <head>
      <title>Less Importing</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Importing</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
      <p class = "myclass2">LESS supports creating cleaner, 
      cross-browser friendly CSS faster and easier.</p>
   </body>
</html>

Sekarang buat file myfile.less .

myfile.less

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

Sekarang buat file style.less .

style.less

@import "http://www.tutorialspoint.com/less/myfile.less";
.myclass2 {
   color: #FF0000;
}

File myfile.less yang akan diimpor ke style.less dari jalurhttps://www.tutorialspoint.com/less/myfile.less

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

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

.myclass2 {
   color: #FF0000;
}

Keluaran

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

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