آموزش less قواعد تودرتو نویسی دایرکتیوها

1396/3/26 علیرضا حاتمی نیا 2359

less Nested directives

سلام . امیدوارم تا این لحظه از آموزش less استفاده کرده باشید. 

مقدمه

در آموزش قبلی درباره قواعد تو در تو نویسی در less نکاتی را متذکرشدیم. در این آموزش قصد داریم در مورد تودرتو نویسی دایرکتیوها صحبت کنیم. 

قواعد تود در تو نویسی دایرکتیوها: 

دایرکتیوهای CSS در Less قابل تودرتو نویسی هستند. منظور از دایرکتیوها همان دستوراتی مانند @media، @font-face، @keyframe و ... می باشند. فرض کنید برای کلاسی به نام myStyle دایرکتیو media را جهت تغییر رنگ متن در سایز های مختلف مرورگر می نویسیم.

.mystyle {
   @media screen {
      color: red;
      @media (min-width: 1024px) {
         color: pink;
      }
   }
   @media text {
      color: green;
   }
} 

طیق روال قبلی فایل style.less را با دستور زیر به فایل style.css کامپایل می کنیم
 

@media screen {
   .mystyle {
      color: red;
   }
}
@media screen and (min-width: 1024px) {
   .myclass {
      color: pink;
   }
}
@media text {
   .myclass {
      color: green;
   }
}

 

کلمات کلیدی

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت