🏠 Home / Hub

💅 SCSS Lesson 03 — Mixins & @include

← Back to SCSS Menu  |  🏠 Hub

1. Basic Mixin

// @mixin = reusable CSS block define
// @include = use it

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

// Usage
.hero     { @include flex-center; height: 100vh; }
.modal    { @include flex-center; position: fixed; inset: 0; }
.card-img { @include flex-center; overflow: hidden; }
Mixin = CSS function လိုပဲ — define once, use everywhere

2. Mixin with Parameters

// Parameters (arguments)
@mixin flex($direction: row, $justify: center, $align: center) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

.nav    { @include flex(row, space-between, center); }
.column { @include flex(column, flex-start, stretch); }
.center { @include flex(); }   // all defaults

// Button mixin
@mixin button($bg: #e040fb, $color: white, $radius: 6px) {
  background: $bg;
  color: $color;
  border: none;
  border-radius: $radius;
  padding: 10px 20px;
  cursor: pointer;
  transition: opacity 0.2s;

  &:hover { opacity: 0.85; }
}

.btn-primary { @include button(#e040fb); }
.btn-danger  { @include button(#dc3545); }
.btn-success { @include button(#28a745); }

3. Responsive Breakpoint Mixins

// Breakpoint mixins — industry standard pattern
$breakpoints: (
  'mobile':  576px,
  'tablet':  768px,
  'desktop': 1024px,
  'wide':    1280px
);

@mixin respond-to($breakpoint) {
  $size: map-get($breakpoints, $breakpoint);
  @media (max-width: $size) {
    @content;   // @content = caller ထည့်ပေးတဲ့ CSS
  }
}

// Usage
.hero-title {
  font-size: 4rem;

  @include respond-to('desktop') { font-size: 3rem; }
  @include respond-to('tablet')  { font-size: 2.2rem; }
  @include respond-to('mobile')  { font-size: 1.6rem; }
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  @include respond-to('tablet') { grid-template-columns: repeat(2, 1fr); }
  @include respond-to('mobile') { grid-template-columns: 1fr; }
}
💡 @content directive = mixin ထဲ block content ထည့်နိုင်တဲ့ feature

4. Useful Mixins Library

// Truncate text (ellipsis)
@mixin truncate($lines: 1) {
  @if $lines == 1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

// Absolute center
@mixin absolute-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

// Gradient background
@mixin gradient($from, $to, $dir: 135deg) {
  background: linear-gradient($dir, $from, $to);
}

// Shadow card
@mixin card-shadow($level: 1) {
  @if $level == 1 { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
  @if $level == 2 { box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
  @if $level == 3 { box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
}

// Usage
h2         { @include truncate(2); }
.badge     { @include absolute-center; }
.hero      { @include gradient(#e040fb, #7b1fa2); }
.card      { @include card-shadow(2); }
.card:hover{ @include card-shadow(3); }

← SCSS 02  |  Next: SCSS 04 → Functions →

📌 Study Checklist