ul {
list-style-type: none;
li {
padding: 12px;
border-radius: 5px;
a {
text-decoration: none;
}
}
}
$tenBien: giaTri;
//vd:
$color: blue;
Giống hàm, có thể xài lại
@mixin tenMixin() {
//code css
}
.button_1 {
@include tenMixin;
}
@mixin tenMixin($tenBien) {
//code css
}
.button_1 {
@include tenMixin(giaTri);
}
//ví dụ
@mixin tenMixin($color) {
//code css
}
.button_1 {
@include tenMixin(red);
}
%tenMuonDat {
//code css
}
.button_1 {
@extend %tenMuonDat;
}
@if $tenBien == giaTri {
//code css
}
Lưu ý: tên file cần import nên đặt tên _tenFile.scss để không biên dịch ra nhiều file.
@import "tenFile"; // không cần .scss
//ví dụ:
@import "_header";
npm install -g sass
sass --watch file.SCSS file.css
