Hướng dẫn sử dụng Mixins trong SASS toàn tập

Nội dung bài viết

# Mixins là cái gì ?
# Một số hàm Mixins hay và thông dụng
@mixin size
@mixin box-shadow
@mixin transform
@mixin border-radius
@mixin centerAbsolute
@mixin min/max-width
@mixin flexbox
# Tạm kết

Chắc hẳn nhiều bạn trong khi học hay khi đi làm ở công ty sau khi vượt qua ngưỡng newbie về HTML hay là CSS rồi. Trong quá trình code CSS sẽ thấy rằng sao có nhiều người họ code cái template đó nhanh thế nhỉ ?

Sao mình cũng dùng CSS như họ mà, hay là mình gõ chậm nhỉ, hay là tư duy phân tích yếu. Thế là mò mẫm trên mạng và thấy người ta bảo dùng SASS code lẹ lắm, chẳng biết SASS là cái gì thế là vội vàng ngồi nghiên cứu về nó.

Rồi phát hiện ra rằng CSS viết lồng nhau được luôn hay thật. Thế là cắm đầu cắm cổ tập viết lồng nhau bao nhanh luôn. Nhưng kết quả vẫn đâu vào đấy vẫn thấy chưa nhanh lắm, thế là tiếp tục hỏi cộng đồng mạng, và họ bảo dùng Mixins code cho nhanh

@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

Và thấy dòng code trên rồi tự hỏi@mixin là cái gì thế nhỉ ? Rồi lại tiếp tục vọc tiếp và thấy rằng ah thì ra @mixin là như vậy nè nó giúp cho chúng ta có thể tái sử dụng và tận dụng code một cách triệt để, để đỡ phải gõ đi gõ lại một dòng code hoài, tiết kiệm thời gian và hoàn thành sớm nữa.

Vậy Mixins thực chất là gì ? Và làm sao để tạo một Mixin để sử dụng cho hiệu quả trong quá trình code trang web đây ?

Hiểu được nhu cầu của các bạn nên hôm nay mình viết bài này để chúng ta sẽ cùng nhau tìm hiểu về Mixins trong SASS là gì và một số hàm Mixins thông dụng trong SASS mà chúng ta nên biết để việc code được nhanh hơn nhiều nhé.

# Mixins là cái gì ?

Nếu các bạn làm lập trình thì chắc hẳn cũng biết đến function nhỉ ? Mixins cũng tương tự như vậy đấy. Nó cho phép chúng ta sử dụng đi sử dụng lại ở nơi nào mà chúng ta muốn hoặc ta có thể tùy chỉnh tham số truyền vào. Mục đích là tiết kiệm code, thời gian và đem lại hiệu quả cao.

Như đã nói Mixins cũng tương tự như function nên Mixins có 2 loại đó chính là

Loại có tham số

@mixin mixin_name(param1, param2...){
    // code here
}

Loại không có tham số

@mixin mixin_name(){
    // code here
}

Để gọi một Mixin ta có cú pháp như sau: @include mixin_name. Ví dụ

@mixin menulink(){
 ul {
  li {
   display: inline-block;
  a {
   color: blue;
  }
  }
 }
}
@include menulink;

Thì nó sẽ render như thế này

ul li {
 display: inline-block;
}
ul li a {
 color: blue;
}

# Một số hàm Mixins hay và thông dụng

Sau đây mình xin chia sẻ một số Mixins mà mình đã từng làm cũng như học hỏi được từ những pro khác trên mạng. Mình sẽ viết ra đây kèm giải thích cho các bạn nhé.

@mixin size

Cho phép chúng ta thiết lập độ rộng và chiều cao của một phần tử bất kỳ khi dùng.

@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

Ví dụ mình muốn cho một class .box nào đó có chiều cao 100px và chiều rộng 100px mình sẽ dùng như thế này: @include size(100px), hàm ở trên mình set giá trị $height là mặc định nếu không truyền tham số thứ 2 thì nó sẽ bằng chiều rộng

Còn các bạn muốn set chiều rộng và chiều cao khác nhau thì các bạn có thể dùng như thế này: @include size(100px, 200px). Từ đó ta sẽ có kết quả

.box {
@include size(100px, 200px);
}
// result
.box {
  width: 100px;
  height: 200px;
}

@mixin box-shadow

Đúng như tên gọi mixin này cho phép chúng ta tạo box-shadow nhanh chóng. Có thể dùng box-shadow bình thường hoặc inset dựa vào các tham số truyền vào

@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
  @if $inset {
    box-shadow:inset $top $left $blur $color;
  } @else {
    box-shadow: $top $left $blur $color;
  }
}

Các bạn có thấy rằng giá trị mặc định của $inset nếu không truyền vào thì sẽ là false nên câu điều kiện @if sẽ chạy đoạn code ở dưới và ngược lại nếu là true thì sẽ chạy đoạn code trên. Sử dụng if else giống trong lập trình luôn.

.box{
@include box-shadow(10px,10px,20px,0px,true);
}
// result
.box {
box-shadow: inset 10px 10px 20px 0px;
}

@mixin transform

Cho phép tạo thuộc tính transform nhanh chóng dựa vào tham số chúng ta truyền vào

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }
//result
.box{
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}

@mixin border-radius

Cho phép tạo border-radius cho phần tử chúng ta muốn, có thể set toàn bộ radius như nhau hoặc set từng góc có độ bo góc khác nhau nhé. Như ở dưới mình set các tham số tương ứng cho các góc.

@mixin border-radius($all: null, $tl: $all, $tr: $all, $btl: $all, $btr: $all) {
  border-top-left-radius: $tl;
  border-top-right-radius: $tr ;
  border-bottom-right-radius: $btr;
  border-bottom-left-radius: $btl;
}

Nếu mình chỉ điền vào một tham số đầu tiên thôi thì tất cả các tham số kia đều là tham số đầu từ đó ta có border-radius 4 góc đều như nhau. Tuy nhiên nếu các bạn muốn set riêng thì các bạn có thể dùng như thế này

.box{
@include border-radius(null, 2px, 3px, 4px, 5px);
}
// result
.box{
  border-top-left-radius:2px;
  border-top-right-radius: 3px ;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 5px;
}

Các bạn có thể tối ưu hơn dựa vào những giải pháp khác nhé. Ở đây mình chỉ code đơn giản thôi, các bạn có thể suy nghĩ và làm nó tốt hơn nà

@mixin centerAbsolute

Khi các bạn code website sẽ gặp các trường hợp muốn làm một phần tử nào đó center bằng việc sử dụng thuộc tính position: absolute kết hợp với thuộc tính transform: translate đúng không ?

Thì trong một trang web dài hay nhiều layout phức tạp chắc chắn sẽ dùng nhiều, nên để tối ưu cho việc phải code đi code lại ta sẽ tạo ra một Mixin để sử dụng nó được nhiều nơi nhé

@mixin centerAbsolute($pos) {
 position: absolute;
 @if $pos == "both" {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 } @else if $pos == "left" {
  left: 50%;
  transform: translateX(-50%);
 } @else if $pos == "top" {
  top: 50%;
  transform: translateY(-50%);
 }
}

Giả sử các bạn muốn phần tử .box đều center hàng dọc và ngang thì các bạn truyền tham số vào là both còn nếu chỉ muốn center hàng dọc thôi thì dùng top hoặc ngược lại muốn center theo chiều ngang thôi thì dùng left

.box{
@include centerAbsolute("both");
}
//result
.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Ngoài ra còn có nhiều Mixins hay khác mà các bạn có thể viết thêm như là khi viết media queries để làm responsive hay là hiển thị flexbox chẳng hạn.

@mixin min/max-width

@mixin minWidth($breakpoint) {
  @media only screen and (min-width: $breakpoint) { @content; }
}

@mixin maxWidth($breakpoint) {
  @media only screen and (max-width: $breakpoint) { @content; }
}

Thay vì các bạn phải viết đi viết lại dòng @media only screen dài quá thì mình viết một Mixin như trên để tiết kiệm thời gian các bạn có thể dùng nó như sau

.box{
 @include minWidth(768px){
  width: 200px;
  height: 200px;
  background-color: red;
 }
}
//result
@media only screen and (min-width:768px){
 .box{
  width: 200px;
  height: 200px;
  background-color: red;
 }
}

@mixin flexbox

@mixin flex($direction: row, $content: null , $items: null, $wrap: null) {
  display: flex;
  flex-direction: $direction;
  justify-content: $content;
  align-items: $items;
  flex-wrap: $wrap;
}

Với các tham số truyền vào thì bạn tự do tùy chỉnh flexbox cho một phần tử mà bạn muốn một cách nhanh nhất nhé.

.box{
  @include flex(row, center, center, wrap);
}
//result
.box{
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
}

Và còn còn rất nhiều Mixins hay và tuyệt vời hơn khác nữa, trong quá trình làm các bạn sẽ tự nhận ra nên viết những Mixins gì để tiết kiệm thời gian, nâng cao năng suất, giúp cho việc code trở nên khỏe hơn và mau hoàn thành hơn.

# Tạm kết

Hi vọng với những kiến thức về Mixins sẽ giúp ích cho các bạn phần nào trong quá trình code SASS được nhanh nhất nhé. Ngoài ra mình cũng tìm kiếm thêm trên Google và tìm được khá nhiều Mixins hay khác nữa mà các bạn có thể tham khảo tại đây hoặc tại đây nhé. Chúc các bạn một ngày tốt lành..