السلام علیک یا اباعبداللّه الحسین

سبد خرید (0)

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