Kiến thức cơ bản về Sass - bài 6 Hỗn hợp - Mixins
Lượt xem: 1226
Hỗn hợp - Mixins
Một số điều trong CSS hơi khó viết, đặc biệt là với CSS3 và nhiều tiền tố nhà cung cấp tồn tại. Một mixin cho phép bạn tạo các nhóm khai báo CSS mà bạn muốn sử dụng lại trên toàn trang web của mình. Bạn thậm chí có thể chuyển các giá trị để làm cho mixin của bạn linh hoạt hơn.Việc sử dụng tốt mixin là dành cho tiền tố của nhà cung cấp. Đây là một ví dụ cho transform.
Cú pháp SASS
=transform($property)
-webkit-transform: $property
-ms-transform: $property
transform: $property
.box
+transform(rotate(30deg))
Cú pháp SCSS
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box { @include transform(rotate(30deg)); }
Đầu ra CSS
.box {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
Để tạo một mixin, bạn sử dụng lệnh @mixin và đặt tên cho nó. Chúng tôi đã đặt tên cho transform mixin của chúng tôi.
Chúng tôi cũng đang sử dụng biến $property bên trong dấu ngoặc đơn để chúng tôi có thể chuyển đổi bất kỳ thứ gì chúng tôi muốn
Sau khi bạn tạo mixin của mình, bạn có thể sử dụng nó làm khai báo CSS bắt đầu bằng @include theo sau là tên của mixin
Nguồn sass-lang.com