الحاق خصوصیات در Less

چاپ

توضیحات مقدماتی

از متغیرها می توان در خصوصیات نیز استفاده کرد. 

یک مثال در Less

مثال زیر نشان می دهد که چطور می توان از متغیرها در Less برای الحاق خصوصیات استفاده کرد:

 

<html>
<head>
 <link rel="stylesheet" href="/style.css" type="text/css" />
 <title>LESS Variables Interpolation Properties</title>
</head>
<body>
<div class="myclass">
<h2>Welcome to Tutorialspoint</h2>
<p>LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p>
</div>
</body>
</html>

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

 

@my-property: color;
.myclass {
 background-@{my-property}: #81F7D8;
}

همان طور که در کدهای Less بالا مشاهده می کنید، یک متغیر در یک خصوصیت الحاق شده است. و پس از کامپایل عبارت background-color تولید خواهد شد. 

با استفاده از دستورات زیر می توانید فایل style.less را به فایل style.css کامپایل کنید:

 

lessc style.less style.css

با اجرای دستورات بالا، فایل style.css به طور اتوماتیک ایجاد خواهد شد. به صورت زیر:

 

.myclass {
 background-color: #81F7D8;
}

 خروجی کدهای بالا

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

 مشاهده ی مثال بالا در ادیتور کدپن

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

See the Pen الحاق خصوصیات در لس by Ehsan Abbasi (@sbaloot) on CodePen.

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