Bài 08: Tìm hiểu Mixin trong SASS

Mình đã từng code CSS cho nhiều trang và mình cũng phân chia và comment rõ ràng cho từng vị trí, tuy nhiên trong quá trình phát triển và bảo trì thì vấn đề phân chia đó đã bị phá hủy bởi rất khó quản lý. Nhưng từ ngày sử dụng SASS thì mọi chuyện lại khác, ta chỉ quan tâm đến file SCSS thôi nên phải tuân theo nguyên tắc của nó và mọi chuyện không còn như trước nữa.

Và trong bài này chúng ta sẽ tìm hiểu đến Mixin, một chức năng khá hay của SASS mà bạn không thể bỏ qua.

1. SASS Mixin là gì?

Mixin có thể hiểu nó như là một directive dùng để gom nhóm CSS lại với nhau, điều này khá giống với Place Holder nhưng không phải vậy, với Mixin thì bạn có thể truyền tham số vào còn Place Holder thì không. Và sau đây là cú pháp tạo Mixin:

Không có tham số:

Bài viết này được đăng tại [free tuts .net]

@mixin mixin_name
{
    // SASS selectors...
}

Có tham số:

@mixin mixin_name(danh_sach_tham_so)
{
    // SASS selectors...
}

Và để gọi sử dụng Mixin thì ta sử dụng cú pháp sau:

@include mixin_name;

SCSS:

@mixin menu{
    #menu 
    {
        a {
            background: #333;
            text-decoration: none;
        }
        
        li {
            height: 30px;
            line-height: 30px;
        }
    }
}

@include menu;

CSS sau khi biên dịch:

#menu a {
    background: #333;
    text-decoration: none; 
}

#menu li {
    height: 30px;
    line-height: 30px; 
}

2. Một số ví dụ của Mixin trong SASS

Sau đây là một số trường hợp hay sử dụng của Mixin trong SASS.

Sử dụng biến:

Trong Mixin có thể sử dụng biến bình thường.

SCSS:

$color-blue : blue;

@mixin menu{
    background: $color-blue;
}

.header{
    @include menu;
}

CSS sau khi biên dịch:

.header {
  background: blue; 
}

Sử dụng tham số:

Muốn sử dụng tham số thì bạn phải dùng cú pháp thứ hai ở phần 1. Lưu ý là khi sử dụng bạn phải truyền đầy đủ các tham số.

SCSS:

@mixin nav($backgroud, $color){
    background: $backgroud;
    color: $color;
}

.nav{
    @include nav(red, white);
    border: solid 1px;
}

CSS sau khi biên dịch:

.nav {
    background: red;
    color: white;
    border: solid 1px; 
}

Giá trị mặc định của tham số:

Thường thì ban phải truyền đẩy đủ các tham số, tuy nhiên nếu ban muốn một tham số nào đó nếu người dùng không nhập vào nó lấy giá trị mặc định thì bạn sẽ sử dụng tham số mặc định lúc khai báo. Tuy nhiên có một lưu ý là nếu bạn có nhiều tham số và chỉ có một vài tham số là mặc định thì bắt buộc những tham số đó phải nằm cuối cùng nếu không khi truyền giá trị bạn phải truyền đầy đủ các tham số đấy.

CSCC:

@mixin nav($backgroud, $color : white){
    background: $backgroud;
    color: $color;
}

.nav{
    @include nav(red);
    border: solid 1px;
}

CSS sau khi biên dịch:

.nav {
    background: red;
    color: white;
    border: solid 1px; 
}

Truyền tham số trùng tên biến:

Như các trường hợp trên thì vị trí các tham số lúc truyền vào phải đúng vị trí của nó, tuy nhiên bạn cũng có thể bỏ qua vấn đề đó nếu lúc truyền biến bạn sử dụng dạng tham số trùng tên biến.

SCSS:

@mixin nav($background, $color){
    background: $background;
    color: $color;
}

.nav{
    @include nav($color : blue, $background : red);
    border: solid 1px;
}

CSS lúc biên dịch:

.nav {
    background: red;
    color: blue;
    border: solid 1px; 
}

Giá trị @content:

Nếu ban muốn trong mixin có thể bổ sung CSS cho nó sau khi khai báo thì bạn sử dụng từ khóa @content đặt trong vị trí muốn bổ sung và khi sử dụng nếu ta khai báo CSS thêm thì nó sẽ tự động điền vào đúng vị trí.

Ví dụ: Sử dụng @content trong Mixin.

SCSS:

@mixin nav($border){
    border: $border;
    @content;
}

.nav{
    @include nav(solid 1px red 1231 ){
        padding: 20px;
    };
}

CSS sau khi biên dịch:

.nav {
    border: solid 1px red 1231;
    padding: 20px; 
}

3. Lời kết

Như vậy là mình đã giới thiệu xong cú pháp, cách sử dụng và một số trường hợp của Mixin trong SASS, hy vọng bài này sẽ giúp bạn bắt đầu máu lửa với SASS. Bài tiếp theo chúng ta sẽ tìm hiểu function trong SASS.