۱۴
اسفند

جلسه ۰۴ : دستورالعمل های تو در تو در LESS

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن ، و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند. آموزش جلسه چهارم Less را با هم شروع می کنیم.در این پست آموزشی قصد داریم با مثال های بیشتری از دستورالعمل های تو در تو در less آشنا شویم.روش سلکتورها ، یک نوع از راه های استفاده از دستورات تو در تو برای بکارگیری keyframe می باشد.با ما همراه باشید ..

توضیحات

دستورالعمل های تو در تو :

شما می توانید دستوراتی همچون media و keyframe را به همان روش سلکتورها، به صورت تو در تو استفاده کنید.

همچنین شما می توانید این دستور را در بالای صفحه قرار دهید، طوری که عناصر نسبی آن در داخل تنظیمات تغییر نکند.

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

دایرکتیوهای CSS در Less قابل تودرتو نویسی هستند. منظور از دایرکتیوها همان دستوراتی مانند media، @font-face، و … می باشند.

مثال زیر کاربرد دستورات تو در تو در Less به روش سلکتورها را نشان می دهد:

مثال :

   <head>
      <title>Nested Directives</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Nested Directives</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

<head>

<title>Nested Directives</title>

</head>

<body>

<h1>Example using Nested Directives</h1>

<p class = "myclass">LESS enables customizable,

manageable and reusable style sheet for web site.</p>

</body>

</html>

سپس فایل style.less را ایجاد می کنیم:

style.less

مثال :

.myclass {
   @media screen {
      color: blue;
      @media (min-width: 1024px) {
         color: green;
      }
   }
   @media mytext {
      color: black;
   }
}

.myclass {

@media screen {

color: blue;

@media (min-width: 1024px) {

color: green;

}

@media mytext {

color: black;

}

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

lessc style.less style.css

بعد از اجرای دستور بالا، فایل style.css به طور اتوماتیک به صورت زیر ایجاد خواهد شد:

style.css

مثال :

@media screen {
   .myclass {
      color: blue;
   }
}
@media screen and (min-width: 1024px) {
   .myclass {
      color: green;
   }
}
@media mytext {
   .myclass {
      color: black;
   }
}

@media screen {

.myclass {

color: blue;

}

@media screen and (min-width: 1024px) {

.myclass {

color: green;

}

@media mytext {

.myclass {

color: black;

}

خروجی

برای دیدن نحوه کارکرد کد بالا، این مراحل را دنبال کنید.

کد HTML بالا را در فایل nested_directives_bubbling.html ذخیره کنید.
فایل HTML را در مرورگر باز کنید،در نهایت خروجی زیر نمایش داده می شود.

دستورالعمل های تو در تو در LESS

کلام آخر

دستورالعمل های تو در تو در less لازمه شروع دوره آموزش less می باشند،همچنین دایرکتیوهای CSS در Less قابل تودرتو نویسی هستند.قابلیت های دوره LESS بیشتر از مطالب ذکر شده می باشند امیدوارم این جلسه را به خوبی فراگرفته باشید تا در جلسات بعدی کمتر با مشکل مواجه شوید.

QR: جلسه ۰۴ : دستورالعمل های تو در تو در LESS

به اشتراک بگذارید

keyframe ,less ,دستورالعمل های تو در تو ,روش سلکتورها

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۴ : دستورالعمل های تو در تو در LESS

مقدمه

توضیحات

دستورالعمل های تو در تو :

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

style.less

style.css

خروجی

کلام آخر

لیست مطالب دوره

مقدمه

ویژگی های زبان برنامه نویسی LESS

توابع در LESS

کاربرد LESS

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ