К содержанию

Mở rộng lớp trong LESS

Nhược điểm của mixin là nó tạo ra sự trùng lặp mã. Hãy xem ví dụ sau để hiểu ý này.

Giả sử chúng ta có mã sau:

styles.less.mix {
  width: 100px;
  height: 100px;
}
p {
  .mix; 
  color: red;
}

Mã này sẽ được biên dịch như sau, tạo ra sự trùng lặp:

styles.css.mix {
  width: 100px;
  height: 100px;
}
p {
  width: 100px;
  height: 100px;
  color: red;
}

Sẽ gọn gàng hơn nếu mã này được biên dịch như sau:

styles.css.mix, p {
  width: 100px;
  height: 100px;
}
p {
  color: red;
}

Điều này có thể đạt được bằng cách sử dụng lệnh &:extend, lệnh này không chèn mixin trực tiếp vào mã, mà mở rộng lớp được chỉ định. Hãy sửa mã của chúng ta:

styles.less.mix {
  width: 100px;
  height: 100px;
}
p {
  &:extend(.mix); 
  color: red;
}

Задание 1

Hãy cho biết kết quả biên dịch của mã sau sẽ như thế nào:

styles.less.mix {
  color: red;
  font-size: 20px;
}
p {
  &:extend(.mix); 
  width: 300px;
}

Задание 2

Hãy cho biết kết quả biên dịch của mã sau sẽ như thế nào:

styles.less.mix {
  color: red;
  font-size: 20px;
}
#block p {
  &:extend(.mix); 
  width: 300px;
}

Задание 3

Hãy cho biết kết quả biên dịch của mã sau sẽ như thế nào:

styles.less.mix {
  color: red;
  font-size: 20px;
}
#block p, #block div {
  &:extend(.mix); 
  width: 300px;
}

Задание 4

Hãy cho biết kết quả biên dịch của mã sau sẽ như thế nào:

styles.less.mix {
  color: red;
  font-size: 20px;
}
#block {
  width: 300px;
  
  p {
    height: 100px;
    &:extend(.mix);
  }
  div {
    height: 200px;
    &:extend(.mix);
  }
}

Задание 5

Hãy cho biết kết quả biên dịch của mã sau sẽ như thế nào:

styles.less.mix1 {
  color: red;
}
.mix2 {
  font-size: 20px;
}
div {
  width: 300px;
  &:extend(.mix1);
  &:extend(.mix2);
}