LESS - Vòng lặp

Trong chương này, chúng ta sẽ hiểu cách hoạt động của Vòng lặp trong LESS. Câu lệnh Loops cho phép chúng ta thực hiện một câu lệnh hoặc một nhóm câu lệnh nhiều lần. Các cấu trúc lặp / lặp khác nhau có thể được tạo khi mixin đệ quy kết hợp vớiGuard Expressions và Pattern Matching.

Thí dụ

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

loop_example.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web. </p>
      </div>
   </body>
</html>

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

style.less

.cont(@count) when (@count > 0) {
   .cont((@count - 1));
   width: (25px * @count);
}

div {
   .cont(7);
}

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

div {
   width: 25px;
   width: 50px;
   width: 75px;
   width: 100px;
   width: 125px;
   width: 150px;
   width: 175px;
}

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