LESS - Mở rộng

Mở rộng là một lớp giả ÍT giúp mở rộng các kiểu bộ chọn khác trong một bộ chọn bằng cách sử dụng :extend bộ chọn.

Thí dụ

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

expand_syntax.htm

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

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

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

style.less

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

Bạn có thể biên dịch extend.less tập tin để extend.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

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

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

Mở rộng cú pháp

Phần mở rộng được đặt vào bộ quy tắc hoặc gắn vào bộ chọn. Nó tương tự như một lớp giả chứa một hoặc nhiều lớp, chúng được phân tách bằng dấu phẩy. Sử dụng từ khóa tùy chọnall, mỗi bộ chọn có thể được theo sau.

Thí dụ

Ví dụ sau minh họa việc sử dụng cú pháp mở rộng trong tệp LESS -

expand_syntax.htm

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

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         
         <div class = "container">
            <p>Hello!!!!!</p>
         </div>
      
      </div>
   </body>
</html>

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

style.less

.style:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

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

.style {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 30px;
}

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

Bảng sau liệt kê tất cả các loại cú pháp mở rộng mà bạn có thể sử dụng trong LESS -

Sr.No.	Loại & Mô tả
1	Mở rộng được đính kèm với bộ chọn Phần mở rộng được kết nối với một bộ chọn trông tương tự như một lớp giả với bộ chọn là tham số.
2	Mở rộng bộ quy tắc nội bộ Các &:extend(selector) cú pháp có thể được đặt bên trong phần thân của ruleet.
3	Mở rộng bộ chọn lồng nhau Các bộ chọn lồng nhau được so khớp bằng cách sử dụng bộ chọn mở rộng .
4	So khớp chính xác với phần mở rộng Theo mặc định, extend tìm kiếm sự phù hợp chính xác giữa các bộ chọn.
5	Biểu thức thứ n Dạng biểu thức thứ n rất quan trọng trong việc mở rộng khác, nó coi bộ chọn là khác.
6	Mở rộng "tất cả" Khi tất cả từ khóa được xác định cuối cùng trongextend đối số thì LESS khớp với bộ chọn đó như một phần của bộ chọn khác.
7	Nội suy bộ chọn với phần mở rộng Các extend có thể được kết nối với bộ chọn nội suy.
số 8	Phạm vi / Mở rộng bên trong @media Phần mở rộng chỉ khớp với bộ chọn có trong cùng một khai báo phương tiện.
9	Phát hiện trùng lặp Nó không thể phát hiện sự trùng lặp của các bộ chọn.

Sau đây là các loại Trường hợp sử dụng cho Mở rộng

Sr.No.	Loại & Mô tả
1	Trường hợp sử dụng cổ điển Trường hợp sử dụng cổ điển được sử dụng để tránh thêm lớp cơ sở trong LESS.
2	Giảm kích thước CSS Phần mở rộng được sử dụng để di chuyển bộ chọn đến các thuộc tính bạn muốn sử dụng; điều này giúp giảm mã được tạo css.
3	Kết hợp phong cách / Mixin nâng cao hơn Sử dụng mở rộng, chúng ta có thể kết hợp các kiểu giống nhau của một bộ chọn cụ thể vào bộ chọn khác.