SASS P6 – Mixin – Function

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 không tham số

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

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

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

Kết quả

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

2. Mixin có tham số

Sử dụng @mixin mixinName($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

@mixinBorderRadius($value){border-radius:$value;-webkit-border-radius:$value;-moz-border-radius:$value;-o-border-radius:$value;}div.avatar {width: 150px;height: 150px;@includeBorderRadius(10px);}

Kết quả

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

3. Mixin có tham số giá trị mặc định

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

@mixinBorderRadius($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@includeBorderRadius(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;}

4. Function

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

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

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

$grid-width: 40px;@functiongrid-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ả