💅 SCSS Lesson 05 — @extend & Placeholder

1. @extend — CSS Inheritance

// @extend = တစ်ခု ရဲ့ styles ကို inherit လုပ်
.message {
  border: 1px solid;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 0.9em;
}

.success {
  @extend .message;
  color: #28a745;
  border-color: #28a745;
  background: #d4edda;
}

.warning {
  @extend .message;
  color: #856404;
  border-color: #ffc107;
  background: #fff3cd;
}

.error {
  @extend .message;
  color: #721c24;
  border-color: #dc3545;
  background: #f8d7da;
}

// Compiled CSS:
// .message, .success, .warning, .error { border: 1px solid; padding: 12px 16px; ... }
// .success { color: #28a745; border-color: #28a745; ... }

2. % Placeholder Selector

// % placeholder = extend ဖို့ပဲ define — ကိုယ်တိုင် CSS output မထုတ်ဘူး!
// .class နဲ့ ကွာချက် — HTML မှာ class="placeholder" လို မသုံးရ

%btn-base {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 0.95em;
  cursor: pointer;
  transition: all 0.2s;
}

%input-base {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1em;
  outline: none;
  transition: border-color 0.2s;

  &:focus { border-color: #e040fb; box-shadow: 0 0 0 3px rgba(#e040fb, 0.15); }
}

.btn-primary   { @extend %btn-base; background: #e040fb; color: white; }
.btn-secondary { @extend %btn-base; background: #6c757d; color: white; }
.btn-ghost     { @extend %btn-base; background: transparent; border: 1px solid #e040fb; color: #e040fb; }

.text-input    { @extend %input-base; }
.email-input   { @extend %input-base; }
.password-input{ @extend %input-base; }

3. @extend vs @mixin — ဘယ်ကို သုံးမလဲ

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

.hero { @extend %flex-center; }
.modal{ @extend %flex-center; }

// CSS output:
// .hero, .modal {
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }

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

.hero { @include flex-center; }
.modal{ @include flex-center; }

// CSS output:
// .hero {
//   display: flex; justify-content: center; align-items: center;
// }
// .modal {
//   display: flex; justify-content: center; align-items: center;
// }

4. Practical: Design System Base

// _base.scss — Design system foundations

$primary:   #e040fb;
$gray-100:  #f8f9fa;
$gray-800:  #343a40;

// Placeholders
%reset     { margin: 0; padding: 0; box-sizing: border-box; }
%sr-only   { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
%clearfix  { &::after { content: ''; display: table; clear: both; } }
%ellipsis  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

// Card base
%card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

// Usage in other files
.product-card { @extend %card; border: 1px solid $gray-100; }
.user-card    { @extend %card; text-align: center; }
.post-card    { @extend %card; display: flex; }