الحاق خصوصیات در 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;
}
خروجی کدهای بالا
گام های زیر را انجم دهید تا مشاهده کنید که کدهای بالا چگونه کار می کنند:
- کدهای اچ تی ام ال بالای صفحه را با نام less_variables_interpolation_properties.html ذخیره کنید.
- اکنون این فایل را در یک مرورگر باز کنید. نتیجه به صورت زیر خواهد بود:
مشاهده ی مثال بالا در ادیتور کدپن
می توانید مثال بالا را به صورت زنده در ادیتور زیر مشاهده کنید:
See the Pen الحاق خصوصیات در لس by Ehsan Abbasi (@sbaloot) on CodePen.
- نوشته شده توسط احسان عباسی
- بازدید: 3894
