LESS - Cài đặt

Trong chương này, chúng ta sẽ hiểu từng bước cách cài đặt LESS.

Yêu cầu hệ thống cho LESS

Operating System - Đa nền tảng
Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.

Cài đặt LESS

Bây giờ chúng ta hãy hiểu việc cài đặt LESS.

Step 1 - Chúng tôi cần NodeJsđể chạy ÍT các ví dụ. Để tải xuống NodeJs, hãy mở liên kếthttps://nodejs.org/en/, bạn sẽ thấy một màn hình như hình dưới đây -

Tải xuống phiên bản Tính năng mới nhất của tệp zip.

Step 2- Chạy thiết lập để cài đặt Node.js trên hệ thống của bạn.

Step 3- Tiếp theo, Cài đặt LESS trên máy chủ thông qua NPM (Node Package Manager). Chạy lệnh sau trong dấu nhắc lệnh.

npm install -g less

Step 4 - Sau khi cài đặt thành công LESS, bạn sẽ thấy các dòng sau trên dấu nhắc lệnh:

`-- [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]

Thí dụ

Sau đây là một ví dụ đơn giản về LESS.

xin chào.htm

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

Bây giờ chúng ta hãy tạo một tệp style.less khá giống với CSS, điểm khác biệt duy nhất là nó sẽ được lưu với phần mở rộng .less . Cả hai tệp, .html và .less phải được tạo bên trong thư mụcnodejs.

style.less

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

h3 {
   color: @color;
}

Biên dịch tệp style.less thành style.css bằng cách sử dụng lệnh sau:

lessc style.less style.css

Khi bạn chạy lệnh trên, nó sẽ tự động tạo tệp style.css . Bất cứ khi nào bạn thay đổi tệp LESS, bạn cần chạy lệnh trên trongcmdvà sau đó tệp style.css sẽ được cập nhật.

Tệp style.css sẽ có mã sau khi bạn chạy lệnh trên:

style.css

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

Đầu ra

Bây giờ chúng ta hãy thực hiện các bước sau để xem mã trên hoạt động như thế nào -

Lưu mã html ở trên trong hello.htm tập tin.
Mở tệp HTML này trong trình duyệt, kết quả sau sẽ được hiển thị.