Mixin là gì?

Mixin tương tự như các hàm (function) trong ngôn ngữ lập trình. Nó có thể lưu trữ nhiều style và có thể được tái sử dụng trong code bất cứ khi nào cần thiết.

Trong SASS, mixin được định nghĩa bằng cách sử dụng at-rule @mixin tại, được viết là @mixin <name> {...} hoặc tên @mixin (<argument ...>) {...}. Tên của mixin có thể là bất kỳ số identifier Sass nào và nó có thể chứa bất kỳ câu lệnh nào.

Trong SASS, để sử dụng mixin thì cần được include bằng cách sử dụng at-rule @include, được viết @include <name> hoặc @include <name> (<argument ...>).

Dưới đây là code mixin trong SASS

@mixin reset-list
  margin: 0
  padding: 0
  list-style: none


@mixin horizontal-list
  @include reset-list

  li
    display: inline-block
    margin:
      left: -2px
      right: 2em




nav ul
  @include horizontal-list

Sau khi biên dịch thành code CSS như sau:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}