Sass @mixin và @include
Sass Mixins
Lệnh @mixin
cho phép bạn tạo mã CSS để sử dụng lại trên toàn bộ trang web.
Lệnh @include
được tạo để cho phép bạn sử dụng (bao gồm) mixin.
Xác định một Mixin
Một mixin được xác định bằng lệnh @mixin
.
Sass @mixin Cú pháp:
@mixin name {
property : value ;
property : value ;
...
}
Ví dụ sau tạo một mixin có tên "quan trọng-văn bản":
Cú pháp SCSS:
@mixin
important-text {
color:
red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
Mẹo: Mẹo về dấu gạch nối và dấu gạch dưới trong Sass: Dấu gạch nối và dấu gạch dưới được coi là giống nhau. Điều này có nghĩa là @mixin important-text { } và @mixin important_text { } được coi là cùng một mixin!
Sử dụng Mixin
Lệnh @include
được sử dụng để bao gồm một mixin.
Sass @include mixin Cú pháp:
selector {
@include mixin-name ;
}
Vì vậy, để bao gồm mixin văn bản quan trọng được tạo ở trên:
Cú pháp SCSS:
.danger {
@include
important-text;
background-color: green;
}
Bộ chuyển mã Sass sẽ chuyển đổi phần trên sang CSS thông thường:
Đầu ra CSS:
.danger {
color:
red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
background-color: green;
}
Một mixin cũng có thể bao gồm các mixin khác:
Cú pháp SCSS:
@mixin special-text {
@include
important-text;
@include
link;
@include
special-border;
}
Truyền biến cho Mixin
Mixins chấp nhận đối số. Bằng cách này, bạn có thể chuyển các biến tới một mixin.
Đây là cách xác định một mixin với các đối số:
Cú pháp SCSS:
/* Define mixin with two arguments */
@mixin bordered($color, $width) {
border:
$width solid $color;
}
.myArticle {
@include bordered(blue, 1px);
// Call mixin with two values
}
.myNotes {
@include bordered(red, 2px); // Call mixin with two values
}
Lưu ý rằng các đối số được đặt làm biến và sau đó được sử dụng làm giá trị (màu sắc và chiều rộng) của thuộc tính đường viền.
CSS sau khi biên dịch sẽ có dạng như sau:
Giá trị mặc định cho Mixin
Cũng có thể xác định giá trị mặc định cho các biến mixin:
Cú pháp SCSS:
@mixin bordered($color: blue, $width:
1px) {
border:
$width solid $color;
}
Sau đó, bạn chỉ cần chỉ định các giá trị thay đổi khi bạn đưa mixin vào:
Cú pháp SCSS:
.myTips {
@include bordered($color: orange);
}
Sử dụng Mixin cho tiền tố nhà cung cấp
Một cách sử dụng tốt khác của mixin là dành cho tiền tố của nhà cung cấp.
Đây là một ví dụ cho việc chuyển đổi:
Cú pháp SCSS:
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.myBox {
@include transform(rotate(20deg));
}
CSS sau khi biên dịch sẽ có dạng như sau:
Đầu ra CSS:
.myBox {
-webkit-transform: rotate(20deg);
-ms-transform:
rotate(20deg);
transform: rotate(20deg);
}