لانه سازی

تودرتوی قوانین سبک CSS می‌تواند شیت‌های سبک شما را سازماندهی‌تر، خواندن آسان‌تر و قابل نگهداری‌تر کند.

نمای کلی

اکنون که با انتخابگرها آشنا شدید، احتمالاً در مورد راهی برای سازماندهی بهتر آنها در شیوه نامه های خود فکر می کنید. تصور کنید که در حال اعمال سبک‌ها برای آیتم‌های داخل بخش «ویژگی» در سایت خود هستید. با تودرتو، می‌توانید این سبک‌ها را در داخل قاعده .feature گروه‌بندی کنید:

.feature {
  button {
    color: blue;
  }

  .link {
    color: red;
  }

  .text {
    font-size: 1.3em;
  }
}

این مانند نوشتن هر سبک جداگانه است:

.feature button {
  color: blue;
}

.feature .link {
   color: red;
}

.feature .text {
   font-size: 1.3em;
}

تودرتو می تواند به همان اندازه که نیاز باشد به عمق لایه ها برود.

.feature {
  .heading {
    color: blue;

    a {
      color: green;
    }
  }
}

گروه بندی و ایجاد روابط

تودرتو به شما این امکان را می دهد که به طور خلاصه تری گروه بندی کنید و بین قوانین سبک ارتباط برقرار کنید.

قانون تودرتو به طور پیش‌فرض به قاعده بیرونی به‌عنوان ترکیب‌کننده نسل مرتبط خواهد بود. از انتخابگرها در قوانین تودرتو برای تغییر روابط استفاده کنید.

/* targets headings that are siblings of the .feature element and come immediately after it */
.feature {
  + .heading {
    color: blue;
  }

/* targets all paragraphs that are direct children of the .feature element */
  > p {
    font-size: 1.3em;
  }
}

روابط صریح را با انتخابگر & تعریف کنید

همچنین می‌توانید از & انتخابگر برای واضح‌تر بودن در هنگام قرار دادن قوانین سبک استفاده کنید. به & به عنوان نمادی که انتخابگر والد را نشان می دهد فکر کنید.

.feature {
 & button {
    color: blue;
  }
}

این معادل نوشتن سبک هایی مانند این است:

.feature button {
  color: blue;
}

زمانی که & مورد نیاز است

بدون & ، انتخابگرهای تودرتو، انتخابگرهای نزولی انتخابگر والد خواهند بود. برای تشکیل انتخابگرهای ترکیبی ، & مورد نیاز است .

.feature {
  &:last-child {
    /* Selects the .feature element that is the :last-child, equivalent to .feature:last-child */
  }
   
  & :last-child {
    /* Selects the :last-child inside of a .feature element, equivalent to .feature :last-child */
  }

  &.highlight {
    /* Selects .feature elements that also have a .highlight class, equivalent to .feature.highlight */
  }

  & .highlight {
     /* Selects elements inside of the .feature element with the class .highlight, equivalent to .feature .highlight */
  }
}

همچنین می توانید زمینه را تغییر دهید و انتخابگر & را در انتهای انتخابگر فرزند یا در دو طرف آن قرار دهید.

/* Targets buttons with an adjacent sibling button */
button {
  & + & {
    /* … */
  }
}

img {
  .my-component & {
    /* styles for images inside of `.my-component` ... */
  }
}

در مثال آخر، ما در حال اضافه کردن سبک برای تصاویر داخل یک عنصر با کلاس .my-component هستیم. این می تواند مفید باشد اگر روی پروژه ای کار می کنید که نمی توانید class یا id ای را به یک عنصر اضافه کنید.

تودرتو و ویژگی

مانند :is() ، انتخابگر تودرتو ویژگی انتخابگر با بالاترین ویژگی را در لیست انتخابگر والد می گیرد.

#main-header,
.intro {
  & a {
    color: green;
  }
}

.intro a {
  color: blue;
}

قانون اول تمام پیوندهای داخل #main-header و عناصر .intro را هدف قرار می دهد و به آنها رنگ سبز می دهد.

قانون دوم سعی می کند این را نادیده بگیرد تا پیوندهای داخل عنصر .intro آبی شود.

اگر به ویژگی هر قانون نگاه کنیم، می توانیم بفهمیم که چرا این کار نمی کند.

/* equivalent to :is(#main-header, .intro) a with a specificity of (1, 0, 1) */
#main-header,
.intro {
  & a {
    color: green;
  }
}

/* lower specificity of (0, 1, 1) */
.intro a {
  color: blue;
}

از آنجایی که قانون اول یک id در لیست انتخابگر خود دارد و قوانین تو در تو، ویژگی انتخابگر با بالاترین ویژگی را می گیرند، ویژگی بالاتری نسبت به قانون دوم دارد. پیوندها حتی برای a که داخل یک عنصر نیستند با انتخابگر #main-header سبز هستند.

تودرتو نامعتبر است

مشابه :is() انتخابگر تودرتو نمی تواند عناصر شبه را نشان دهد.

blockquote, blockquote::before, blockquote::after {
  color: navy;

  & {
    border: 1px solid navy;
  }
}

شما انتظار دارید که blockquote و عناصر شبه آن هر دو دارای متن و حاشیه های navy باشند، اما اینطور نیست. از آنجایی که & انتخابگر نمی تواند عناصر شبه را نشان دهد، سبک های حاشیه تودرتو فقط برای بلوک نقل قول اعمال می شوند.

هنگام ساخت انتخابگرهای ترکیبی با استفاده از انتخابگرهای & و نوع، انتخابگر نوع باید ابتدا بدون هیچ فاصله سفیدی بین آن قرار گیرد.

/* valid css nesting */
.feature {
  p& {
    font-weight: bold;
  }
}

/* invalid css nesting */
.feature {
  &p {
    font-weight: bold;
  }
}

این قانون به تودرتوی CSS اجازه می دهد تا در کنار ابزارهای پیش پردازش مانند Sass کار کند. در Sass، نوشتن &p انتخابگر والد را به انتخابگر نوع تودرتو اضافه می‌کند و نتیجه می‌شود .featurep .

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

قوانین گروه شرطی CSS مانند @container ، @media ، @supports و @layer نیز می‌توانند تودرتو باشند.

.feature {
  @media (min-width: 40em) {
    /* ... */
  }

  @container (inline-size > 900px) {
    /* ... */
  }
}

.feature {
  @supports (display: grid) {
    /* ... */
  }
}

.feature {
  @layer component {
    h2 {
      /* ... */
    }
  }
}

درک خود را بررسی کنید