SCSS extend

• SCSS @extend, kế thừa những thuộc tính của thành phần khác đã được khai báo trước đó, giúp giảm thời gian code và trùng lặp code.

Ví dụ về SCSS @extend

.box {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
}
.section {
    @extend .box;
    padding: 20px;
}

.box, .section {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
}
.section {
    padding: 20px;
}

• Chú ý là thành phần kế thừa và được kế thừa phải tương thích nhau, xét một số trường hợp sau đây để hiểu hơn:

p.box {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
}
div.section {
    @extend .box;
    padding: 20px;
}

p.box {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
}

div.section {
    padding: 20px;
}

=> Không kế thừa được, vì p và div không tương thích nhau.

p.box {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
}
.list {
    @extend .box;
    padding: 20px;
}

p.box, p.list {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
}

.list {
    padding: 20px;
}

=> Kế thừa được, vì .list không phân biệt được là thành phần nào, khi này chương trình sẽ tự hiểu p.list. Khi sử dụng các bạn cần cẩn thận trường hợp này nhé.

section.content .info {
  font-size: 0.8em;
}

.content nav.sidebar {
    @extend .info;
    padding: 30px;
}

section.content .info, section.content nav.sidebar {
    font-size: 0.8em;
}

.content nav.sidebar {
    padding: 30px;
}

=> Kế thừa được, vì .content không phân biệt được là thành phần nào, khi này chương trình sẽ tự hiểu section.content. Khi sử dụng các bạn cần cẩn thận trường hợp này nhé.

section.content .info {
  font-size: 0.8em;
}

.content nav.sidebar {
    @extend section.content .info;
    padding: 30px;
}

// cmd Báo lỗi sai cú pháp

=> Không kế thừa được, cmd Báo lỗi sai cú pháp.