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

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ả

Nguồn: viblo.asia

Bài viết liên quan

Thay đổi Package Name của Android Studio dể dàng với plugin APR

Nếu bạn đang gặp khó khăn hoặc bế tắc trong việc thay đổi package name trong And

Lỗi không Update Meta_Value Khi thay thế hình ảnh cũ bằng hình ảnh mới trong WordPress

Mã dưới đây hoạt động tốt có 1 lỗi không update được postmeta ” meta_key=

Bài 1 – React Native DevOps các khái niệm và các cài đặt căn bản

Hướng dẫn setup jenkins agent để bắt đầu build mobile bằng jenkins cho devloper an t

Chuyển đổi từ monolith sang microservices qua ví dụ

1. Why microservices? Microservices là kiến trúc hệ thống phần mềm hướng dịch vụ,