Khi nào sử dụng extends vs mixins trong SASS

SASS cung cấp cho chúng ta 2 cách để có thể tái sử dụng style, đó là extends và mixins. Bài viết này tôi sẽ chỉ cho bạn biết cách chúng hoạt động và sử dụng khi nào.

1.Extend

extend cho phép bạn chia sẻ style giữa 2 selector. Nó tương tự như cách kết hợp các class trong HTML. Cùng xem ví dụ sau:

    <div class="error seriousError">
        This page not found!
    </div>

    .error{
        border: 1px #f00;
        background-color: #fdd;
    }
    .seriousError{
        @extend .error;
        border-width: 3px;
    }
    
    // which compiles to:
    
    .error, .seriousError {
        border: 1px #f00;
        background-color: #fdd;
    }
    
    .seriousError {
        border-width: 3px;
    }

Như vậy với việc sử dụng @extend thì code trở nên ngắn gọn và dễ hiểu hơn rất nhiều.

Nếu bạn không muốn biên dịch class .error, bạn chỉ muốn dùng nó như một param hoặc constructor dùng chung thì bạn có thể dùng placeholder selectors. Cùng xem ví dụ sau:

    %foo{
        border: 1px #f00;
        background-color: #fdd;
    }
    .seriousError{
        @extend %foo;
        border-width: 10px;
    }
    
    .notSoSeriousError{
        @extend %foo;
        border-width: 3px;
    }
    // which compiles to:
    
    .seriousError, notSoSeriousError {
        border: 1px #f00;
        background-color: #fdd;
    }
    
    .seriousError {
        border-width: 10px;
    }
    
    .notSoSeriousError{
        border-width: 3px;
    }

2. Mixins

Mixins khá giống với extends, xét ví dụ sau:

    @mixin error{
        border: 1px solid #f00;
        background-color: #fdd;
    }
    .seriousError{
        @include error;
    }
    
    .notSoSeriousError{
        @include error;
    }
    // which compiles to:
    
    .seriousError {
        border: 1px solid #f00;
        background-color: #fdd;
    }
    
    .notSoSeriousError{
        border: 1px solid #f00;
        background-color: #fdd;
    }

Có thể thấy khi sử dụng mixins thì code sẽ bị lặp đi lặp lại khi compile. Vậy điều này có thực sự tốt?

Đó không phải là những gì mixins hướng đến. Bạn có thể truyền vào arguments giống như một function. Hãy xem ví dụ sau:

    @mixin error($bgColor){
        border: 1px solid $bgColor;
        background-color: #fdd;
    }
    .seriousError{
        @include error(red);
    }
    
    .notSoSeriousError{
        @include error(yellow);
    }
    // which compiles to:
    
    .seriousError {
        border: 1px solid #f00;
        background-color: red;
    }
    
    .notSoSeriousError{
        border: 1px solid #f00;
        background-color: yellow;
    }

3. Kết luận

Nếu bạn sử dụng styles tĩnh, thì tốt nhất bạn hãy sử dụng @extend. Việc sử dụng mixins trong trường hợp này gây ra cồng kềnh, code sẽ bị trùng lặp, chỉ sử dụng cho styles động.

Tài liệu tham khảo:

https://www.tutorialspoint.com/sass/sass_mixin_directives.htm
https://www.tutorialspoint.com/sass/extending_sass.htm