Bài 04: Kế thừa extend trong SASS

Như một ngôn ngữ lập trình, SASS cho phép chúng kế thừa lẫn nhau và khi biên dịch nó sẽ tự động gắn từng selector theo đúng khuôn khổ của nó. 

Hãy chắc chắn rằng bạn đã cài đặt SASS và cấu hình SASS trên Netbeans nhé.

1. Kế thừa @extend trong SASS

Note: Để tiện cho việc viết tuts thì chúng ta gọi mỗi block CSS là một selector nhé các bạn.

Extend trong SASS được dùng trong trường hợp bạn muốn một selector sử dụng lại những thuộc tính của selector khác, chúng có thể kế thừa một cấp hoặc nhiều cấp đều được.

Bài viết này được đăng tại [kiso.vn]

Ví dụ: Selector kế thừa một cấp

SCSS:

.floatLeft{
    float: left;
    width: 50%;
}

.columnLeft{
    @extend .floatLeft;
    backgroud: #ffffff;
}

CSS sau khi biên dịch:

.floatLeft, .columnLeft 
{
    float: left;
    width: 50%; 
}

.columnLeft {
    backgroud: #ffffff; 
}

Bạn thấy vì lớp .columnLeft kế thừa .floatLeft nên khi biên dịch .columnLeft sẽ được thêm vào selelector .floatLeft (chung CSS).

Ví dụ: Selector kế thừa nhiều cấp

SCSS:

.floatLeft{
    float: left;
    width: 50%;
}

.columnLeft{
    @extend .floatLeft;
    backgroud: #ffffff;
}

.boxLeft{
   @extend .columnLeft;
   color: #000;
}

CSS sau khi biên dịch:

.floatLeft, .columnLeft, .boxLeft {
  float: left;
  width: 50%; 
}

.columnLeft, .boxLeft {
  backgroud: #ffffff; 
}

.boxLeft {
  color: #000; 
}

Hãy tự suy nghĩ để hiểu nguyên lý của nó nhé.

2. Một ví dụ thực tế về Extend trong SASS

Giả sử chúng ta cần tạo CSS cho ba loại thông báo gồm error, sucesss, warning. Lúc này phân tích ra ta thấy chúng có chung một cách hiển thị và chỉ khác màu nền nên ta sẽ tạo một class .message chứa CSS chung và các class .error, .success, .warning sẽ kế thừa .message.

SCSS:

.message{
    border: solid 1px;
    text-align: center;
    font-size: 16px;
    padding: 20px 10px;
}

.error{
    @extend .message;
    background: red;
}

.success{
    @extend .message;
    background: blue;
}

.warning{
    @extend .message;
    background: yellow;
}

CSS sau khi biên dịch:

.message, .error, .success, .warning {
    border: solid 1px;
    text-align: center;
    font-size: 16px;
    padding: 20px 10px; 
}

.error {
    background: red; 
}

.success {
    background: blue; 
}

.warning {
    background: yellow; 
}

3. Lời kết

Vậy là mình giới thiệu xong chức năng kế thừa Extend trong Sass, bài tiếp theo chúng ta sẽ tìm hiểu về Place Holder và kết hợp với extend để bỏ đi những phần select không cần thiết khi biên dịch.