LESS - Chức năng

Sự miêu tả

LESS ánh xạ mã JavaScript với thao tác các giá trị và sử dụng các hàm được xác định trước để thao tác các khía cạnh của phần tử HTML trong biểu định kiểu. Nó cung cấp một số chức năng để điều chỉnh màu sắc như chức năng tròn, chức năng sàn, chức năng ceil, chức năng phần trăm, v.v.

Thí dụ

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

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

Bây giờ, hãy tạo tệp style.less .

style.less

@color: #FF8000;
@width:1.0;
.mycolor {
   color: @color;
   width: percentage(@width);
}

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

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

style.css

.mycolor {
   color: #FF8000;
   width: 100%;
}

Đầ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 functions.html tập tin.
Mở tệp HTML này trong trình duyệt, hiển thị bạn sẽ nhận được kết quả sau.