%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده (تمدید شد)
سبد (0)

تبلیغات

الحاق خصوصیات در 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 {
[email protected]{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.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی