LESS - Hoạt động

Sự miêu tả

LESS cung cấp hỗ trợ cho một số phép toán số học như cộng (+), trừ (-), nhân (*) và chia (/) và chúng có thể hoạt động trên bất kỳ số, màu hoặc biến nào. Các phép toán tiết kiệm rất nhiều thời gian khi bạn đang sử dụng các biến và bạn cảm thấy như đang làm việc với toán học đơn giản.

Thí dụ

Ví dụ sau minh họa việc sử dụng các thao tác trong tệp LESS -

<html>
   <head>
      <title>Less Operations</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Operations</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Tiếp theo, tạo tệp style.less .

style.less

@fontSize: 10px;
.myclass {
   font-size: @fontSize * 2;
   color:green;
}

Bạn có thể 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

Thực hiện lệnh trên; nó sẽ tự động tạo tệp style.css với mã sau:

style.css

.myclass {
   font-size: 20px;
   color: green;
}

Đầu ra

Làm theo các bước sau để xem cách mã trên hoạt động -

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