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

%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ố.

$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.