@mixin trong Sass là gì?

@mixin là một khối tái sử dụng (reusable block) trong Sass, dùng để định nghĩa các đoạn CSS có thể tái sử dụng nhiều lần, thậm chí có thể truyền tham số để tạo ra các CSS linh hoạt

Cú pháp cơ bản:

@mixin ten-mixin {
 // các thuộc tính CSS
}

@include ten-mixin; //gọi mixin

Ví dụ đơn giản:

@mixin center-flex {
    display: flex;
     justify-content: center;
     align-items: center;
}

.box {
     @include center-flex;
      height: 100px;
}

Kết quả CSS sau khi biên dịch:

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}
Mục lục Hiển thị

Truyền tham số vào @mixin

@mixin font-size($size, $weight: normal) {
  font-size: $size;
  font-weight: $weight;
}

.text-large {
  @include font-size(24px, bold);
}

.text-small {
  @include font-size(12px); // dùng mặc định weight
}

🧙 Ứng dụng nâng cao – @mixin kết hợp @content

Khi bạn muốn mixin có thể nhúng thêm nội dung tuỳ ý, dùng @content

@mixin card {
  padding: 1rem;
  border-radius: 8px;
  background: white;

  @content; // chèn nội dung thêm khi gọi mixin
}

.box {
  @include card {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
}
Mục tiêuCách dùng @mixin hiệu quả
Tái sử dụng logicTạo mixin cho các pattern lặp đi lặp lại như clearfix, center, button-style, text-style, v.v.
Tùy biến theo tham sốDùng tham số kèm @if, @else, @each trong mixin để xử lý linh hoạt.
 Kết hợp với @contentCho phép người gọi tùy chỉnh thêm nội dung khi gọi mixin.
Kết hợp @mixin + @functionDùng function xử lý giá trị trước, rồi đưa vào mixin.
ResponsiveTạo mixin responsive để truyền breakpoint linh hoạt:
@mixin responsive($breakpoint) {
  @if $breakpoint == sm {
    @media (max-width: 640px) { @content; }
  } @else if $breakpoint == md {
    @media (max-width: 768px) { @content; }
  } @else if $breakpoint == lg {
    @media (max-width: 1024px) { @content; }
  }
}

.container {
  width: 100%;
  @include responsive(md) {
    width: 90%;
  }
}

Tip ghi nhớ:

 

Ký hiệuGợi nhớ
@mixin“Mix nguyên liệu CSS” – như block tái sử dụng.
@include“Include = Gọi ra” để chèn vào class.
@contentCho phép chèn nội dung mở rộng vào nơi gọi.
@mixin + tham sốTạo mixin như hàm nhận input.