تعریف
شما میتوانید directive هایی نظیر media و keyframe را بصورت تو در تو بنویسید. شما میتوانید directive را در بالا بنویسید تا المان های مربوط به آن مجموعه بدون تغییر باقی بمانند.
مثال
مثال زیر directive تو در تو در فایل 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;
}
}
خروجی
بیایید دستورات زیر را انجام دهیم تا خروجی را ببینیم:
- کدهای html بالا را در فایل nested_directives_bubbling.html ذخیره کنید.
- فایل HTML را در مرورگر باز کنید، خروجی بدین شکل خواهد بود.
