SCSS placeholders
- Cách sử dụng SCSS placeholder khá giống với
@mixin, tuy nhiên các thành phần sử dụng placeholders sẽ được gom chung vào cùng một bộ các thuộc tính.
Ví dụ về SCSS placeholder
| SCSS |
CSS |
%reset-list {
margin: 0;
padding: 0;
background: none;
}
ul {
@extend %reset-list;
background-color: #f1f1f1;
li {
padding: 10px;
border: 1px solid #ccc;
}
}
div {
@extend %reset-list;
}
|
ul, div {
margin: 0;
padding: 0;
background: none;
}
ul {
background-color: #f1f1f1;
}
ul li {
padding: 10px;
border: 1px solid #ccc;
}
|
Ta thấy thành phần ul và div đã được gom chung và sử dụng các thuộc tính khai báo tại %reset-list.
Placeholder không sử dụng đối số
- Do tính chất gom sử dụng chung các thuộc tính, nên placeholder không sử dụng được cho đối số.
| SCSS |
CSS |
$center($w) {
margin: 0 auto;
width: $w;
}
.main {
@extend $center(300px);
padding: 20px;
}
.box {
@extend $center(100px);
background-color: #f1f1f1;
}
|
//cmd báo lỗi sai cấu trúc.
|
