KURANG - Instalasi

Dalam bab ini, kita akan memahami, selangkah demi selangkah, cara menginstal LESS.

Persyaratan Sistem untuk LESS

Operating System - Lintas platform
Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.

Pemasangan LESS

Mari kita sekarang memahami instalasi LESS.

Step 1 - Kami membutuhkan NodeJsuntuk menjalankan contoh KURANG. Untuk mengunduh NodeJs, buka tautannyahttps://nodejs.org/en/, Anda akan melihat layar seperti di bawah ini -

Unduh file zip versi Fitur Terbaru .

Step 2- Jalankan pengaturan untuk menginstal Node.js di sistem Anda.

Step 3- Selanjutnya, Instal LESS di server melalui NPM (Node Package Manager). Jalankan perintah berikut di prompt perintah.

npm install -g less

Step 4 - Setelah instalasi LESS berhasil, Anda akan melihat baris berikut pada command prompt -

`-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | `-- [email protected]
   `-- [email protected]

Contoh

Berikut ini adalah contoh sederhana dari LESS.

halo

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>
   
   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <h3>Hello!!!!!</h3>
   </body>
</html>

Sekarang mari kita buat file style.less yang sangat mirip dengan CSS, satu-satunya perbedaan adalah file ini akan disimpan dengan ekstensi .less . Baik file .html dan .less harus dibuat di dalam foldernodejs.

style.less

@primarycolor: #FF7F50;
@color:#800080;
h1 {
   color: @primarycolor;
}

h3 {
   color: @color;
}

Kompilasi file style.less ke style.css dengan menggunakan perintah berikut -

lessc style.less style.css

Ketika Anda menjalankan perintah di atas, itu akan membuat file style.css secara otomatis. Setiap kali Anda mengubah file LESS, Anda perlu menjalankan perintah di atas dicmddan kemudian file style.css akan diperbarui.

File style.css akan memiliki kode berikut ketika Anda menjalankan perintah di atas -

style.css

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

Keluaran

Sekarang mari kita lakukan langkah-langkah berikut untuk melihat cara kerja kode di atas -

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