Mixin cho phép bạn định nghĩa các thuộc tính CSS lại với nhau, về cơ bản nó mạnh hơn so với việc dùng biến chỉ lưu được một giá trị, cũng giống với extend kế thừa các thuộc tính nhưng mixin còn hỗ trợ thêm cả tham số không khác gì một function.

1. Mixin basic (không có tham số)

Sử dụng @mixin name để khai báo mixin

Sử dụng @include name để sử dụng

@mixin BorderRadius {
  border-radius: 50%;
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%;       
  -o-border-radius: 50%;
}
div.avatar {
  width: 150px;
  height: 150px;
  @include BorderRadius;
  overflow: hidden;
}

Kết quả

div.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  overflow: hidden;
}

2. Mixin Arguments (có tham số)

Sử dụng @mixin name($params) để khai báo mixin

Trong đó $params là các tham số truyền vào

Sử dụng @include name($params) để sử dụng

@mixin BorderRadius($value) {
  border-radius: $value;
  -webkit-border-radius: $value; 
  -moz-border-radius: $value;       
  -o-border-radius: $value;
}
div.avatar {
  width: 150px;
  height: 150px;
  @include BorderRadius(10px);
  overflow: hidden;
}

Kết quả

div.avatar {
  width: 150px;
  height: 150px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  overflow: hidden;
}

1 ví dụ sử dụng mixin với tham số mặc định

@mixin BorderRadius($value: 50%) {
  border-radius: $value;
  -webkit-border-radius: $value; 
  -moz-border-radius: $value;       
  -o-border-radius: $value;
}
div.avatar {
  width: 150px;
  height: 150px;
  overflow: hidden;
  
  // Không có tham số, lấy giá trị mặc định 50%
  @include BorderRadius;
  
  // Có tham số truyền vào 15px
  @include BorderRadius(15px);
}

Kết quả

div.avatar {
  width: 150px;
  height: 150px;
  overflow: hidden;
  
  // Không có tham số, lấy giá trị mặc định 50%
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  
  // Có tham số truyền vào 15px
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -o-border-radius: 15px;
}

3. Function

Sử dụng @function name($params) để khai báo một function

Trong đó $params là các tham số truyền vào

Sử dụng name($params) để gọi function

$grid-width: 40px;

@function grid-width($n) {
  @return $n * $grid-width;
}

#sidebar { width: grid-width(5); }

Kết quả khi compile CSS

#sidebar { width: 200px; }

Lưu ý

• Function có thể có tham số hoặc không có tham số
• Function có thể truyền tham số mặc định vào trong param
• Function cũng khá giống với mixin nên tùy vào mục đích sử dụng mà bạn lựa chọn loại nào để dùng
• Ta dùng function khi muốn tính toán, so sánh giá trị rồi trả về một kết quả