💅 SCSS Lesson 02 — Nesting

1. Basic Nesting

HTML structure ကို mirror လုပ်ပြီး CSS ရေးနိုင် — selectors ထပ်ထပ်ရေးမနေရ

nav { background: #333; }
nav ul { list-style: none; }
nav ul li { display: inline; }
nav ul li a {
  color: white;
  text-decoration: none;
}
nav ul li a:hover {
  color: #e040fb;
}

nav {
  background: #333;

  ul {
    list-style: none;

    li {
      display: inline;

      a {
        color: white;
        text-decoration: none;

        &:hover {
          color: #e040fb;
        }
      }
    }
  }
}

2. & (Parent Selector)

// & = parent element ကို refer လုပ်တယ်
.button {
  background: #e040fb;
  color: white;
  padding: 10px 20px;

  &:hover   { background: #c000d0; }     // .button:hover
  &:focus   { outline: 2px solid #fff; } // .button:focus
  &:active  { transform: scale(0.97); }  // .button:active
  &:disabled{ opacity: 0.5; cursor: not-allowed; }

  // Modifier classes (BEM style)
  &--large  { padding: 16px 32px; font-size: 1.2em; }
  &--small  { padding: 6px 12px; font-size: 0.85em; }
  &--outline{ background: transparent; border: 2px solid #e040fb; color: #e040fb; }

  // State class
  &.is-loading { opacity: 0.7; pointer-events: none; }
}

// Compiles to:
// .button { ... }
// .button:hover { ... }
// .button--large { ... }
// .button.is-loading { ... }

3. BEM + SCSS

// BEM: Block__Element--Modifier
// SCSS: & ကို သုံးပြီး elegant ဖြစ်

.card {
  background: white;
  border-radius: 12px;
  overflow: hidden;

  &__header {        // .card__header
    padding: 20px;
    border-bottom: 1px solid #eee;
  }

  &__title {         // .card__title
    font-size: 1.2em;
    color: #333;
  }

  &__body {          // .card__body
    padding: 20px;
  }

  &__footer {        // .card__footer
    padding: 16px 20px;
    background: #f5f5f5;
  }

  &--featured {      // .card--featured
    border: 2px solid #e040fb;
    box-shadow: 0 4px 20px rgba(224,64,251,0.2);
  }

  &--dark {          // .card--dark
    background: #1a1a2e;
    color: white;
  }
}

4. Media Query Nesting

// SCSS — media query ကို selector ထဲမှာ ထည့်လို့ ရ!
.hero {
  font-size: 3rem;
  padding: 80px 40px;

  @media (max-width: 768px) {   // tablet
    font-size: 2rem;
    padding: 40px 20px;
  }

  @media (max-width: 480px) {   // mobile
    font-size: 1.5rem;
    padding: 24px 16px;
  }
}

// Mixin နဲ့ ပြောင်း (Lesson 03 မှာ သင်မယ်):
@mixin mobile { @media (max-width: 480px) { @content; } }
@mixin tablet { @media (max-width: 768px) { @content; } }

.hero {
  font-size: 3rem;

  @include mobile { font-size: 1.5rem; }
  @include tablet { font-size: 2rem; }
}

5. Nesting Depth — မဆင်းသင့်တဲ့ level

// ❌ Too deep (avoid)
.nav {
  .list {
    .item {
      .link {
        .icon {          // 5 levels deep — CSS nightmare!
          color: red;
        }
      }
    }
  }
}
// Compiles: .nav .list .item .link .icon { color: red; }
// Very hard to override!

// ✅ Better — use BEM
.nav {
  &__item  { }
  &__link  { &:hover { } }
  &__icon  { }
}