SCSS @mixin & @include

SCSS @mixin & @include

  • Khác với @exclude là kế thừa thuộc tính của thành phần có sẵn, tuy nhiên @mixin & @include cung cấp một giải pháp tốt hơn nhiều, đó là tạo một bộ các thuộc tính, và chèn nó vào bên trong các thành phần muốn sử dụng, quan trọng là @mixin & @include cung cấp đối số có thể tùy chỉnh trong từng thành phần được sử dụng.

SCSS @mixin & @include không có đối số

SCSS CSS 
@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul {
    @include reset-list;
    background-color: #f1f1f1;
    li {
        padding: 10px;
        border: 1px solid #ccc;
    }
}
 
ul {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #f1f1f1;
}
ul li {
    padding: 10px;
    border: 1px solid #ccc; 
}

Ta thấy thành phần ul đã sử dụng các thuộc tính được khai báo tại @mixin reset-list.

SCSS @mixin & @include - đối số là giá trị

SCSS CSS 
@mixin center($w) {
    margin: 0 auto;
    width: $w;
}
.main {
    @include center(300px);
    padding: 20px;
}
.box {
    @include center(100px);
    background-color: #f1f1f1;
}
 
.main {
    margin: 0 auto;
    width: 300px;
    padding: 20px;
}
.box {
    margin: 0 auto;
    width: 100px;
    background-color: #f1f1f1;
}

Ta thấy cả 2 thành phần .main và .box đều đã sử dụng các thuộc tính được khai báo tại @mixin center, tuy nhiên với 2 đối số $w được truyền khác nhau.

SCSS @mixin & @include - đối số là thuộc tính

SCSS CSS 
@mixin center($prop, $val) {
    margin: 0 auto;
    width: 300px;
    #{$prop}: $val;
}
.main {
    @include center(color,red);
    padding: 20px;
}
.box {
    @include center(font-size,24px);
    background-color: #f1f1f1;
}
 
.main {
    margin: 0 auto;
    width: 300px;
    color: red;
    padding: 20px;
}

.box {
    margin: 0 auto;
    width: 300px;
    font-size: 24px;
    background-color: #f1f1f1;
}

Cẩn thận cách khai báo cho thuộc tính #{$prop}.

Thêm ví dụ về đối số là thuộc tính

SCSS CSS 
@mixin propMixi($prop,$val) {
  -webkit-#{$prop}: $val;
     -moz-#{$prop}: $val;
      -ms-#{$prop}: $val;
          #{$prop}: $val;
}
.main {
  @include propMixi(box-shadow,3px 3px 2px blue);
  padding: 20px;
}
.box {
  @include propMixi(transform,rotate(90deg));
  background-color: #f1f1f1;
}
 
.main {
  -webkit-box-shadow: 3px 3px 2px blue;
  -moz-box-shadow: 3px 3px 2px blue;
  -ms-box-shadow: 3px 3px 2px blue;
  box-shadow: 3px 3px 2px blue;
  padding: 20px;
}

.box {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  background-color: #f1f1f1;
}

SCSS - @extend

SCSS - Placeholders