📌 مفهوم Nesting در SASS

• Nesting یعنی قرار دادن Selectorها داخل هم، مشابه ساختار HTML.
• این قابلیت باعث می‌شود کدهای CSS سازمان‌یافته‌تر، خواناتر و کوتاه‌تر شوند.

🆚 مقایسه با CSS معمولی

🔻 در CSS معمولی باید تمام مسیر Selector را بنویسیم:

nav ul li a {
  color: gray;
}
nav ul li a:hover {
  color: blue;
}

🔹 در SASS با استفاده از Nesting می‌توانیم ساختار را داخل هم بنویسیم:

.navbar {
  ul {
    li {
      a {
        color: gray;
        &:hover {
          color: blue;
        }
      }
    }
  }
}

🎯 مزایای Nesting

✔ خوانایی بیشتر کدها (ساختار شبیه HTML)
✔ مدیریت بهتر استایل‌ها
✔ کاهش تکرار Selectorهای طولانی
✔ مناسب برای ساختارهای سلسله‌مراتبی مثل منو، فرم، کارت‌ها و…

💡 استفاده از & (Parent Selector)

• علامت & نماینده والد است (همان Selector اصلی).
• کاربرد در pseudo-class‌ها مانند :hover یا :active.

a {
  color: gray;
  &:hover {
    color: blue;
  }
}

🔤 Nesting در ویژگی‌ها (Property Nesting)

• می‌توان ویژگی‌هایی مثل font-size و font-weight را داخل font قرار داد:

a {
  font: {
    size: 18px;
    weight: bold;
  }
}

🧪 نمونه نهایی از جلسه

.navbar {
  background-color: $nav-bg;
  height: 50px;
  display: flex;
  padding: 0 16px;
  ul {
    li {
      display: inline-block;
      margin-left: 16px;
      a {
        color: rgb(85, 85, 85);
        transition: color 0.5s ease;
        &:hover {
          color: blue;
        }
      }
    }
  }
}