دستورات تودرتو در 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 ذخیره کنید.
- حالا این فایل اچ تی ام ال را در مرورگر خود باز کنید. خروجی به صورت زیر خواهد بود:
- نوشته شده توسط احسان عباسی
- بازدید: 4039
