دستورات تودرتو در Less

توضیحات

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

مثال

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

<html>
<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>

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

.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 به طور اتوماتیک به صورت زیر ایجاد خواهد شد:

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

خروجی

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

کد اچ تی ام ال بالای صفحه را با نام nested_directives_bubbling.html ذخیره کنید.
حالا این فایل اچ تی ام ال را در مرورگر خود باز کنید. خروجی به صورت زیر خواهد بود:

: نوشته شده توسط احسان عباسی; بازدید: 3892

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی