آموزش کار با دستورات at-root در Sass

آموزش Sass – کار با دستورات @at-root

شرح کلی

دستور @at-root سبب می شود یک یا چند دستور (rule) بجای اینکه داخل بدنه و در زیر انتخابگرهای میزبان (parent selector) جایگذاری (nest) شود، در بالای یک فایل (root فایل) نوشته و خروجی دهد. به عبارت دیگر، دستور @at-root مجموعه ای از دستورات تودرتو (nested) هستند که امکان قرارگیری قطعه کد style (style block) را در بالای فایل فراهم می آورد و دستورات تعریف شده در بدنه ی selector را از زیرمجموعه ی آن selector خارج سازد.

این دستور را می توان هم به صورت درون خطی داخل یک inline selector واحد بکار برد:

.parent {
  ...
  @at-root .child { ... }
}

کد زیر را تولید می کند:

.parent { ... }
.child { ... }

یا می توان آن را داخل یک قطعه کد که حاوی چندین selector می باشد، بکار برد:

.parent {
  ...
  @at-root {
    .child1 { ... }
    .child2 { ... }
  }
  .step-child { ... }
}

کد زیر را به عنوان خروجی تولید می کند:

.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }

دستورات @at-root (without: ...) و @at-root (with: ...)

به صورت پیش فرض، دستور @at-root style های تودرتو که داخل انتخابگر میزبان (parent selector) جای گرفته اند را به خارج از آن انتقال می دهد/selector ها را حذف می کند. اما این امکان نیز وجود دارد که style ها را به خارج از directive های تودرتو نظیر @media نیز انتقال داد/directive ها را حذف کرد. مثال:

@media print {
  .page {
    width: 8in;
    @at-root (without: media) {
      color: red;
    }
  }
}

کد زیر را تولید می کند:

@media print {
  .page {
    width: 8in;
  }
}
.page {
  color: red;
}

شما می توانید با استفاده از دستور @at-root (without: ...)، style های تعریف شده در directive را به بیرون از آن انتقال نمایید. در واقع با ارسال آرگومان (without: media) به دستور مزبور می توان دستورات تودرتوی CSS را نگه داشته و در عین حال دستورات style دهی را از زیرمجموعه ی directive میزبان خارج نمایید. حال اگر آرگومان (with: media) را به دستور مربوطه ارسال نمایید، دستورات style دهی داخل directive مانده ولی دستورات تودرتوی CSS خارج یا حذف می شوند.

می توان دستورات style دهی را همزمان از داخل بدنه ی چند directive خارج ساخت. برای این منظور کافی است از کاراکتر space بین directive های دلخواه استفاده نمایید، مانند: @at-root (without: media supports) که سبب می شود دستورات مربوطه از زیرمجموعه ی هر دو کوئری @media و @supports خارج شود.

اگر می خواهید بجای اینکه مشخص کنید کدام دستورات باید حذف (exclude) شوند، تعیین کنید کدام دستورات بایستی اضافه و بکار گرفته شوند، می توانید از پارامتر with بجای without استفاده نمایید. برای مثال: دستور @at-root (with: rule) دستورات style دهی را از تمامی directive ها خارج می کند ولی تمامی دستوراتCSS را حفظ کرده و نگه می دارد.

مثال کاربردی: استفاده ی عملی از پارامترهای (without: ...) و (with: ...)

همان طور که در بالا گفته شد، دستور @at-root به صورت پیش فرض style ها را از زیر مجموعه ی selector بیرون می آورد. همچنین با استفاده از @at-root شما می توانید style ها را به بیرون از بدنه ی directive تودرتو خارج نمایید.

به عنوان مثال می توانید یک فایل SASS با محتوای زیر ایجاد نمایید:

@media print {
   .style {
      height: 8px;
      @at-root (without: media) {
         color: #808000;;
      }
   }
}

کد بالا به فایل CSS زیر ترجمه می شود:

@media print {
   .style {
      height: 8px;
   }
}
.style {
   color: #808000;
}

مثال:

مثال زیر نحوه ی استفاده از دستور @at-root به صورت کاربردی در فایل SCSS را نمایش می دهد:

atroot.htm
< !doctype html >
   < head >
      < title >At-root Example< /title >
      < link rel="stylesheet" href="atroot.css" type="text/css" / >
   < /head >
   < body class="container" >
      < h2 >Example using at-root< /h2 >
      < p class="style" >Lorem Ipsum is simply dummy text of the printing and typesetting industry.< /p >
   < /body >
< /html >

سپس فایل atroot.scss را ایجاد نمایید:

atroot.scss
h2 {
   color: #808000;
   background-color: #DB7093;
   @at-root {
      .style{
         font-size: 20px;
         font-style: bold;
         color: #B8860B;
      }
   }
}

می توانید با درج دستور زیر در خط فرمان به Sass اعلان نمایید که به تغییرات در فایل مورد نظر گوش فرا داده و به محض رخداد تغییر یا بروز رسانی در محتوای فایل SASS، کد CSS متناظر آن را نیز بروز آوری کند:

sass --watch C:\ruby\lib\sass\atroot.scss:atroot.css

دستور بالا را اجرا نمایید. می بینید که یک فایل به نام atroot.css با محتوای زیر تولید می شود:

atroot.css
h2 {
   color: #808000;
   background-color: #DB7093;
}
.style {
   font-size: 20px;
   font-style: bold;
   color: #B8860B;
}

خروجی

جهت مشاهده ی خروجی کد، مراحل زیر را به ترتیب طی نمایید:

• کد html بالا را در فایل atroot.html ذخیره نمایید.
• فایل HTML را با مرورگر دلخواه باز نمایید. خروجی به صورت زیر در پنجره ی مرورگر به نمایش در می آید: