Sass @mixin và @include

Mixin Sass

@mixin lệnh cho phép bạn tạo mã CSS có thể được lặp lại trên toàn trang web.

tạo @include lệnh được thiết kế để cho phép bạn sử dụng (tham chiếu) mixin.

định nghĩa Mixin

Mixin được sử dụng @mixin định nghĩa bởi lệnh.

Cú pháp @mixin Sass:

@mixin name {
  property: value;
  property: value;
  ...
}

Dưới đây là ví dụ tạo mixin có tên "important-text":

Ngữ pháp SCSS:

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

Lưu ý:

Lưu ý về dấu gạch chéo và dấu dưới của Sass: Dấu gạch chéo và dấu dưới được coi là giống nhau.

điều này có nghĩa là @mixin important-text { } và @mixin important_text { } được coi là mixin cùng một!

Sử dụng Mixin

@include Hướng dẫn được sử dụng để tham chiếu mixin.

Cú pháp Sass @include mixin:

selector {
  @include mixin-name;
}

Vì vậy, nếu muốn bao gồm mixin important-text đã tạo trên:

Ngữ pháp SCSS:

.danger {
  @include important-text;
  background-color: green;
}

Bộ dịch Sass sẽ chuyển đổi mã trên thành CSS thông thường:

CSS đầu ra:

.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

Mixin cũng có thể bao gồm các mixin khác:

Ngữ pháp SCSS:

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

Truyền biến vào Mixin

Mixins chấp nhận tham số. Bằng cách này, bạn có thể truyền biến vào mixin.

Dưới đây là cách định nghĩa mixin có tham số:

Ngữ pháp SCSS:

/* Định nghĩa mixin có hai tham số */
@mixin bordered($color, $width) {
  border: $width solid $color;
}
.myArticle {
  @include bordered(blue, 1px);  // Gọi mixin có hai giá trị
}
.myNotes {
  @include bordered(red, 2px); // Gọi mixin có hai giá trị
}

Lưu ý, các tham số được đặt thành biến và sau đó được sử dụng làm giá trị của thuộc tính viền (màu và độ rộng).

Sau khi biên dịch, CSS sẽ như sau:

CSS đầu ra:

.myArticle {
  border: 1px solid blue;
}
.myNotes {
  border: 2px solid red;
}

Giá trị mặc định của Mixin

Cũng có thể đặt giá trị mặc định cho biến mixin:

Ngữ pháp SCSS:

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}

Sau đó, bạn chỉ cần chỉ định giá trị cần thay đổi khi gọi mixin:

Ngữ pháp SCSS:

.myTips {
  @include bordered($color: orange);
}

Sử dụng Mixin làm tiền tố nhà cung cấp

Một用途 rất tốt của mixin là (browser) tiền tố nhà cung cấp.

Đây là một ví dụ về chuyển đổi:

Ngữ pháp SCSS:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.myBox {
  @include transform(rotate(20deg));
}

Sau khi biên dịch, CSS sẽ như sau:

Ngữ pháp CSS:

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}