Làm quen với Mixin trong SASS

Như các bạn đã biết hiện nay SASS là một công nghệ mới dành cho các bạn làm về Frontend. Nó giúp cho việc viết style khá nhanh và thuận tiện. Hôm nay chúng ta sẽ cùng tìm hiểu về Mixin trong SASS

1. SASS Mixin là gì?

Với các bạn đã biết về lập trình thì cũng đã biết về function. Mixin tương tự như các function. có thể sử dụng ở khắp mọi nơi (bạn phải include) và chúng ta có thể truyền tham số để tuỳ biến.

Bắt đầu nhé:

Mixin có 2 loại: Không có tham số và có tham số.

Không có tham số:

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

Có tham số:

@mixin mixin_name(param1, param2...)
{
    // SASS selectors...
}

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

@include mixin_name;

Ví dụ: Xây dựng mixin chứa những đoạn mã CSS cho một box link

SCSS:

@mixin box_link{
    .box-link{
        ul{
            li{
                margin: 20px;
                a{
                    line-height: 2;
                    color: #fff;
                }
            }
        }
    }
}
@include box_link;

Chú ý: Nếu các bạn viết mixin ở 1 file khác, các bạn nhớ include và file css của mình

CSS sau khi biên dịch:

.box-link ul li {
    margin: 20px;
}
.box-link ul li a {
    line-height: 2;
    color: #fff;
}

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ác bạn vẫn có thể sử dụng biến bình thường.

SCSS:

$base_font_size: 14px;
$link: #ffffff !default;
$link_hover: #000000 !default;

.box-link{
    padding: 0px 10px 0px 5px;
    ul{
        list-style: none;
        margin: 0;
        li{
            a{
                font-size: $base_font_size - 1;
                color: $link;
                &:hover{
                    color: $link_hover;
                }
            }
        }
    }
}

CSS sau khi biên dịch:

.box-link {
    padding: 0px 10px 0px 5px;
}
.box-link ul {
    list-style: none;
    margin: 0;
}
.box-link ul li a {
    font-size: 13px;
    color: #ffffff;
}
.box-link ul li a:hover {
    color: #000000;
}

Sử dụng tham số: Như mình đã nói ở phần mở đầu, Mixin cũng có thể truyền tham số và sử dụng như một function.

SCSS:

@mixin css3-compatible($atribute, $params) {
  #{$atribute}: #{$params};
  -webkit-#{$atribute}: #{$params};
  -khtml-#{$atribute}: #{$params};
  -moz-#{$atribute}: #{$params};
  -ms-#{$atribute}: #{$params};
  -o-#{$atribute}: #{$params};
}

.box-link{
    ul{
        li{
            a{
                color: #fff;
                @include css3-compatible(transition, all 0.3s ease 0s);
            }
        }
    }
}

CSS sau khi biên dịch:

.box-link ul li a {
    color: #fff;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -khtml-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
}

Chú ý: Khi sử dụng mixin truyền tham số, các bạn phải truyền đủ tham số

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 box-link($color){
    color: $color;
    @content;
}

.box-link{
    @include box-link(red){
        padding: 20px;
    };
}

CSS sau khi biên dịch:

.box-link {
    color: red;
    padding: 20px;
}

Như vậy mình đã giới thiệu qua với các bạn tác dụng và cách sử dụng mixin trong SASS. Hi vọng bài viết nhỏ này của mình sẽ giúp ích phần nào cho các bạn. Hẹn gặp lại các bạn trong bài viết sau.