Nesting در Sass امکان می‌دهد CSS سلسله‌مراتبی و مرتبط با هم را بدون تکرار Selectorها بنویسید.

۱️⃣ Nested Rules (تو در تو کردن قوانین)

• شما می‌توانید Selectorهای داخلی را داخل Selector والد قرار دهید

مثال ساده

nav {
  background: #333;
  color: #fff;

  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;

      a {
        color: #fff;
        text-decoration: none;
      }
    }
  }
}

📌 خروجی CSS معادل:

nav {
  background: #333;
  color: #fff;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}

۲️⃣ Nested Properties (تو در تو کردن ویژگی‌ها)

• Sass امکان گروه‌بندی ویژگی‌های مرتبط را می‌دهد

مثال

.border-box {
  border: {
    width: 2px;
    style: solid;
    color: #3498db;
  }
}

📌 خروجی CSS:

.border-box {
  border-width: 2px;
  border-style: solid;
  border-color: #3498db;
}

ویژگی‌های قابل Nesting معمول

• margin و padding

• border

• font

• background

۳️⃣ Parent Selector (&)

• برای ارجاع به Selector والد از & استفاده می‌شود

مثال

.button {
  color: white;
  background: blue;

  &:hover {
    background: darkblue;
  }

  &.active {
    background: green;
  }
}

📌 خروجی CSS:

.button {
  color: white;
  background: blue;
}

.button:hover {
  background: darkblue;
}

.button.active {
  background: green;
}

۴️⃣ نکات مهم

• Nesting بیش از حد باعث CSS طولانی و پیچیده می‌شود → توصیه می‌شود حداکثر ۳ سطح تو در تو کردن استفاده شود

• می‌توان از Parent Selector (&) برای pseudo-classes، pseudo-elements و کلاس‌های ترکیبی استفاده کرد

• Nested Properties باعث خواناتر شدن کد و کاهش تکرار ویژگی‌ها می‌شوند

🔹 مثال کامل ترکیبی

.card {
  border: {
    width: 1px;
    style: solid;
    color: #ccc;
  }
  padding: 20px;
  background: #fff;

  h2 {
    margin-top: 0;
    font-size: 1.5rem;
  }

  p {
    font-size: 1rem;
    color: #333;
  }

  &:hover {
    border-color: #3498db;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
}

📌 این مثال یک کارت ساده با عنوان، متن و افکت hover ایجاد می‌کند