تو در تو (Nesting)

در Sass می توانی قوانین را تو در تو بنویسی. «تو در تو (Nesting)» یعنی قرار دادن سلکتورهای مرتبط داخل هم. بنابراین کد کوتاه تر می شود و خوانایی بهتر می شود. مثل دفتر مدرسه که هر درس، زیر پوشه همان درس قرار می گیرد.

قوانین تو در تو در Sass

Sass اجازه می دهد سلکتورها شبیه ساختار HTML تو در تو شوند. بنابراین بخش ناوبری سایت را مرتب تر می نویسی و رابطه عناصر واضح می شود.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

مشاهده در ادیتور

در CSS عادی، همین قواعد جداگانه و بدون تو در تو نوشته می شوند. اما در Sass ساختار منطقی صفحه بهتر دیده می شود و ویرایش سریع تر انجام می شود.

خواص تو در تو در Sass

بسیاری از خواص پیشوند مشترک دارند؛ مانند font-* یا text-*. در Sass می توانی آن ها را به صورت تو در تو بنویسی تا گروه بندی واضح شود.

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

مشاهده در ادیتور

نکته: ترنس پایلر Sass این ساختار را به CSS استاندارد تبدیل می کند. مثلاً font: { size: ... } به font-size: ... تبدیل می شود.

تمرین سه مرحله ای

1. یک منوی ساده با nav بساز.
2. قواعد ul، li و a را تو در تو کن.
3. گروه فونت و متن را به صورت تو در تو بنویس.

ادامه مسیر: ابتدا متغیرها در Sass را مرور کن. سپس به ایمپورت در Sass سر بزن. برای بازگشت سریع، همین صفحه تو در تو را نشانه گذاری کن.

جمع بندی سریع

• تو در تو، ساختار را واضح تر می کند.
• کد کوتاه تر و خواناتر می شود.
• گروه خواص با پیشوند مشترک ساده می شود.
• خروجی نهایی، CSS استاندارد است.