دستورات تودرتو در 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;
 }
}

 خروجی

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

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