SASS cho phép định nghĩa một đoạn thuộc tính dùng lại nhiều lần bằng "@mixin tên { ... }", và chèn vào một khối luật bằng "@include tên;".
Cho một đoạn SASS gồm định nghĩa MỘT mixin (không tham số, chứa 1 hoặc nhiều thuộc tính), theo sau là một khối luật (selector) có một số thuộc tính riêng và một dòng "@include tên;" ở giữa, hãy biên dịch thành một khối CSS duy nhất, trong đó dòng @include được thay bằng toàn bộ các thuộc tính của mixin (giữ đúng thứ tự xuất hiện, các thuộc tính khác giữ nguyên vị trí).
Định nghĩa mixin "@mixin tên {", các dòng thuộc tính, "}"; tiếp theo là khối luật "selector {", các dòng thuộc tính hoặc "@include tên;", "}".
Mixin có từ 1 đến 3 thuộc tính. Khối luật có từ 1 đến 4 thuộc tính riêng (không tính dòng @include).
In ra một khối CSS duy nhất "selector { ... }", các thuộc tính theo đúng thứ tự sau khi thay @include bằng nội dung mixin, thụt vào 2 dấu cách.
Ví dụ:
Đầu vào:
@mixin flexCenter {
display: flex;
justify-content: center;
}
.box {
color: red;
@include flexCenter;
margin: 0;
}Đầu ra:
.box {
color: red;
display: flex;
justify-content: center;
margin: 0;
}Đang tải editor...