Một lớp CSS có thể kế thừa một lớp khác không?

Thường có những trường hợp khi thiết kế một trang khi một lớp phải có tất cả các kiểu của lớp khác, cũng như các kiểu cụ thể của riêng nó. Ví dụ: phương pháp BEM khuyến khích các lớp bổ trợ đi trên cùng các phần tử như các lớp khối hoặc phần tử. Nhưng điều này có thể tạo ra HTML lộn xộn, nó dễ bị lỗi do quên bao gồm cả hai lớp và nó có thể mang lại những lo ngại về kiểu phi ngữ nghĩa trong đánh dấu của bạn

  Oh no! You've been hacked!

 

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

Quy tắc

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

1 của Sass giải quyết vấn đề này. Nó được viết là

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

1 và nó cho Sass biết rằng một bộ chọn sẽ kế thừa kiểu của một bộ chọn khác

SCSS Cú pháp

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

Cú pháp Sass

.error
  border: 1px #f00
  background-color: #fdd

  &--serious
    @extend .error
    border-width: 3px

Đầu ra CSS

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

Khi một lớp mở rộng một lớp khác, Sass tạo kiểu cho tất cả các thành phần khớp với bộ mở rộng như thể chúng cũng khớp với lớp đang được mở rộng. Khi một bộ chọn lớp mở rộng một lớp khác, nó hoạt động chính xác như thể bạn đã thêm lớp mở rộng vào mọi thành phần trong HTML đã có lớp mở rộng. Bạn có thể chỉ cần viết

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

3 và Sass sẽ đảm bảo rằng nó được tạo kiểu như thể nó cũng có

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

4

Tất nhiên, bộ chọn không chỉ được sử dụng riêng trong quy tắc kiểu. Sass biết mở rộng mọi nơi mà bộ chọn được sử dụng. Điều này đảm bảo rằng các phần tử của bạn được tạo kiểu chính xác như thể chúng khớp với bộ chọn mở rộng

SCSS Cú pháp

.error:hover {
  background-color: #fee;
}

.error--serious {
  @extend .error;
  border-width: 3px;
}

Cú pháp Sass

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

0

Đầu ra CSS

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

1

⚠️ Lưu ý

Các phần mở rộng được giải quyết sau khi phần còn lại của biểu định kiểu của bạn được biên dịch. Cụ thể, nó xảy ra sau khi bộ chọn gốc được giải quyết. Điều này có nghĩa là nếu bạn

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

5, nó sẽ không ảnh hưởng đến bộ chọn bên trong trong

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

6. Điều đó cũng có nghĩa là các bộ chọn gốc trong SassScript không thể xem kết quả của extend

Không giống như mixin sao chép các kiểu vào quy tắc kiểu hiện tại, 

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

1 cập nhật các quy tắc kiểu có chứa bộ chọn mở rộng để chúng cũng chứa bộ chọn mở rộng. Khi mở rộng bộ chọn, Sass thực hiện thống nhất thông minh

• Nó không bao giờ tạo các bộ chọn như

  .error {
    border: 1px #f00;
    background-color: #fdd;
  
    &--serious {
      @extend .error;
      border-width: 3px;
    }
  }
  

  8 không thể khớp với bất kỳ phần tử nào

• Nó đảm bảo rằng các bộ chọn phức tạp được xen kẽ để chúng hoạt động bất kể các phần tử HTML được lồng vào nhau theo thứ tự nào

• Nó cắt bớt các bộ chọn thừa nhiều nhất có thể, trong khi vẫn đảm bảo rằng độ đặc hiệu lớn hơn hoặc bằng độ đặc hiệu của bộ mở rộng

• Nó biết khi nào một bộ chọn khớp với mọi thứ mà một bộ chọn khác làm và có thể kết hợp chúng lại với nhau

• Nó xử lý thông minh các tổ hợp, bộ chọn chung và lớp giả có chứa bộ chọn

SCSS Cú pháp

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

6

Cú pháp Sass

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

7

Đầu ra CSS

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

0

⚠️ Lưu ý

Bởi vì

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

1 cập nhật các quy tắc kiểu có chứa bộ chọn mở rộng, các kiểu của chúng được ưu tiên trong tầng dựa trên vị trí xuất hiện của các quy tắc kiểu của bộ chọn mở rộng, không dựa trên vị trí mà

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

1 xuất hiện. Điều này có thể gây nhầm lẫn, nhưng chỉ cần nhớ. đây là cùng mức độ ưu tiên mà các quy tắc đó sẽ có nếu bạn thêm lớp mở rộng vào HTML của mình

Đôi khi bạn muốn viết một quy tắc kiểu chỉ nhằm mục đích mở rộng. Trong trường hợp đó, bạn có thể sử dụng bộ chọn giữ chỗ, giống như bộ chọn lớp bắt đầu bằng

.error
  border: 1px #f00
  background-color: #fdd

  &--serious
    @extend .error
    border-width: 3px

1 thay vì

.error
  border: 1px #f00
  background-color: #fdd

  &--serious
    @extend .error
    border-width: 3px

2. Bất kỳ bộ chọn nào bao gồm phần giữ chỗ đều không được đưa vào đầu ra CSS, nhưng các bộ chọn mở rộng chúng thì có

SCSS Cú pháp

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

1

Cú pháp Sass

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

2

Đầu ra CSS

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

3

Giống như các thành viên mô-đun, bộ chọn giữ chỗ có thể được đánh dấu là riêng tư bằng cách bắt đầu tên của nó bằng

.error
  border: 1px #f00
  background-color: #fdd

  &--serious
    @extend .error
    border-width: 3px

3 hoặc

.error
  border: 1px #f00
  background-color: #fdd

  &--serious
    @extend .error
    border-width: 3px

4. Bộ chọn trình giữ chỗ riêng chỉ có thể được mở rộng trong biểu định kiểu xác định nó. Đối với bất kỳ biểu định kiểu nào khác, có vẻ như bộ chọn đó không tồn tại

Khi một biểu định kiểu mở rộng bộ chọn, tiện ích mở rộng đó sẽ chỉ ảnh hưởng đến các quy tắc kiểu được viết trong các mô-đun ngược dòng—nghĩa là các mô-đun được biểu định kiểu đó tải bằng quy tắc

.error
  border: 1px #f00
  background-color: #fdd

  &--serious
    @extend .error
    border-width: 3px

5 hoặc quy tắc

.error
  border: 1px #f00
  background-color: #fdd

  &--serious
    @extend .error
    border-width: 3px

6, các mô-đun được tải bởi các mô-đun đó, v.v. Điều này giúp làm cho các quy tắc

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

1 của bạn dễ đoán hơn, đảm bảo rằng chúng chỉ ảnh hưởng đến các kiểu bạn biết khi viết chúng

⚠️ Lưu ý

Tiện ích mở rộng hoàn toàn không có phạm vi nếu bạn đang sử dụng quy tắc

.error
  border: 1px #f00
  background-color: #fdd

  &--serious
    @extend .error
    border-width: 3px

8. Chúng không chỉ ảnh hưởng đến mọi biểu định kiểu bạn nhập mà còn ảnh hưởng đến mọi biểu định kiểu nhập biểu định kiểu của bạn, mọi thứ khác mà các biểu định kiểu đó nhập, v.v. Không có

.error
  border: 1px #f00
  background-color: #fdd

  &--serious
    @extend .error
    border-width: 3px

5, tiện ích mở rộng là toàn cầu

Thông thường, nếu một

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

1 không khớp với bất kỳ bộ chọn nào trong biểu định kiểu, thì Sass sẽ tạo ra lỗi. Điều này giúp bảo vệ khỏi lỗi đánh máy hoặc đổi tên bộ chọn mà không đổi tên bộ chọn kế thừa từ bộ chọn đó. Các tiện ích mở rộng yêu cầu có bộ chọn mở rộng là bắt buộc

Điều này có thể không phải luôn luôn là những gì bạn muốn, mặc dù. Nếu bạn muốn

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

1 không làm gì nếu bộ chọn mở rộng không tồn tại, chỉ cần thêm

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

2 vào cuối

Extends và mixins là cả hai cách đóng gói và sử dụng lại các kiểu trong Sass, điều này tự nhiên đặt ra câu hỏi khi nào nên sử dụng kiểu nào. Mixins rõ ràng là cần thiết khi bạn cần định cấu hình các kiểu bằng cách sử dụng các đối số, nhưng nếu chúng chỉ là một nhóm các kiểu thì sao?

Theo nguyên tắc chung, phần mở rộng là tùy chọn tốt nhất khi bạn đang thể hiện mối quan hệ giữa các lớp ngữ nghĩa (hoặc bộ chọn ngữ nghĩa khác). Bởi vì một phần tử có lớp

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

3 là một lỗi, nên nó sẽ mở rộng

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

4. Tuy nhiên, đối với các bộ sưu tập kiểu phi ngữ nghĩa, việc viết một mixin có thể tránh được các cơn đau đầu theo tầng và giúp định cấu hình xuống dòng dễ dàng hơn

💡 Sự thật thú vị

Hầu hết các máy chủ web đều nén CSS mà chúng phục vụ bằng thuật toán rất tốt trong việc xử lý các đoạn văn bản giống hệt nhau lặp đi lặp lại. Điều này có nghĩa là, mặc dù các mixin có thể tạo ra nhiều CSS hơn các phần mở rộng, nhưng chúng có thể sẽ không làm tăng đáng kể số lượng mà người dùng của bạn cần tải xuống. Vì vậy, hãy chọn tính năng phù hợp nhất với trường hợp sử dụng của bạn, chứ không phải tính năng tạo ra ít CSS nhất

Khả năng tương thích (Không có phần mở rộng hợp chất)

LibSass và Ruby Sass hiện cho phép mở rộng các bộ chọn hỗn hợp như

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

5. Tuy nhiên, hành vi này không phù hợp với định nghĩa của

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

1. thay vì các thành phần tạo kiểu phù hợp với bộ chọn mở rộng như thể nó có

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

7, vốn sẽ bị ảnh hưởng bởi các quy tắc kiểu bao gồm

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

8 hoặc

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

9, nó chỉ tạo kiểu cho chúng bằng các quy tắc bao gồm cả

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

8 và

.error:hover {
  background-color: #fee;
}

.error--serious {
  @extend .error;
  border-width: 3px;
}

1

Để giữ cho định nghĩa về

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

1 đơn giản và dễ hiểu, đồng thời để quá trình triển khai rõ ràng và hiệu quả, hành vi đó hiện không được dùng nữa và sẽ bị xóa khỏi các phiên bản trong tương lai

Xem trang thay đổi vi phạm để biết thêm chi tiết

Chỉ các bộ chọn đơn giản—các bộ chọn riêng lẻ như

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

9 hoặc

.error:hover {
  background-color: #fee;
}

.error--serious {
  @extend .error;
  border-width: 3px;
}

4—có thể được mở rộng. Nếu có thể mở rộng

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

5, thì định nghĩa của

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

1 nói rằng các phần tử khớp với phần mở rộng sẽ được tạo kiểu như thể chúng khớp với

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

5. Điều đó cũng giống như khớp cả

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

8 và 

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

9, vì vậy sẽ không có bất kỳ lợi ích nào khi viết thay vì _______100

Tương tự, nếu có thể mở rộng

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

01, thì nó sẽ (gần như) làm điều tương tự như mở rộng

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

9 của chính nó. Sự khác biệt tinh tế không đáng để gây nhầm lẫn khi trông giống như nó đang làm điều gì đó khác biệt đáng kể, vì vậy điều này cũng không được phép

SCSS Cú pháp

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

4

Cú pháp Sass

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

5

Khi

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

1 xen kẽ các bộ chọn phức tạp, nó không tạo ra tất cả các kết hợp có thể có của các bộ chọn tổ tiên. Nhiều bộ chọn mà nó có thể tạo ra không thực sự khớp với HTML thực và việc tạo tất cả chúng sẽ khiến biểu định kiểu trở nên quá lớn đối với rất ít giá trị thực. Thay vào đó, nó sử dụng phương pháp phỏng đoán. nó giả định rằng tổ tiên của mỗi bộ chọn sẽ độc lập, không bị xen kẽ với bất kỳ tổ tiên nào của bộ chọn khác

SCSS Cú pháp

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

6

Cú pháp Sass

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

7

Đầu ra CSS

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

8

Mặc dù cho phép sử dụng

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

1 trong phạm vi của

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

05 và các quy tắc CSS khác, nhưng không được phép mở rộng bộ chọn xuất hiện bên ngoài quy tắc của nó. Điều này là do bộ chọn mở rộng chỉ áp dụng trong ngữ cảnh phương tiện cụ thể và không có cách nào để đảm bảo hạn chế đó được giữ nguyên trong bộ chọn đã tạo mà không sao chép toàn bộ quy tắc kiểu

Một lớp CSS có thể kế thừa một hoặc nhiều lớp khác không?

Làm cách nào để kế thừa một lớp này sang lớp khác trong CSS?

Có thể kế thừa trong CSS không?

CSS có thể có hai lớp không?