LESS - Chuyển các bộ quy tắc cho Mixin

Sự miêu tả

Bộ quy tắc tách rời chứa các bộ quy tắc như thuộc tính, bộ quy tắc lồng nhau, khai báo biến, mixin, v.v. Nó được lưu trữ trong một biến và được đưa vào cấu trúc khác; tất cả các thuộc tính của bộ quy tắc được sao chép vào cấu trúc đó.

Thí dụ

Ví dụ sau đây cho thấy cách chuyển một bộ quy tắc để mixin trong tệp LESS -

pass_ruleset.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

@detached-ruleset: {
   .mixin() {
      font-family: "Comic Sans MS";
      background-color: #AA86EE;
   }
};

.cont {
   @detached-ruleset();
   .mixin();
}

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

.cont {
   font-family: "Comic Sans MS";
   background-color: #AA86EE;
}

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

Phạm vi

Tất cả các biến và mixin trong bộ quy tắc tách rời có sẵn ở bất cứ nơi nào tập quy tắc được gọi hoặc xác định. Nếu không, cả người gọi và phạm vi định nghĩa đều có sẵn theo mặc định. Phạm vi khai báo được ưu tiên khi cả hai phạm vi đều chứa mixin hoặc biến giống nhau. Phần thân của bộ quy tắc tách rời được xác định trong phạm vi khai báo. Nó không thay đổi phạm vi của nó sau khi bộ quy tắc tách rời được sao chép từ biến này sang biến khác.

Bảng sau liệt kê tất cả các loại phạm vi:

Sr.No.	Loại & Mô tả
1	Định nghĩa và khả năng hiển thị phạm vi người gọi Các biến và mixin được xác định bên trong bộ quy tắc tách rời.
2	Tham chiếu sẽ không sửa đổi phạm vi tập quy tắc tách rời Chỉ đưa ra các tham chiếu, bộ quy tắc không truy cập vào bất kỳ phạm vi mới nào.
3	Mở khóa sẽ sửa đổi phạm vi tập quy tắc tách rời Bộ quy tắc tách rời có thể truy cập vào phạm vi bằng cách nhập vào nó.