@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êu Cách dùng @mixin hiệu quả
Tái sử dụng logic Tạ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 @content Cho phép người gọi tùy chỉnh thêm nội dung khi gọi mixin.
Kết hợp @mixin + @function Dùng function xử lý giá trị trước, rồi đưa vào mixin.
Responsive Tạ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ệu Gợ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.
@content Cho 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.