سبد (0)

عملگرها در Less

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

Less از برخی عملگرهای محاسباتی همچون عملگر به اضافه(+) و منها(-) و ضرب(*) و تقسیم(/) پشتیبانی می کند. این عملگرها می تواند بر روی هر عدد یا رنگ یا متغیری، عمل کنند. این عملگرها هنگامی که شما از متغیرها استفاده می کنید و نیاز به استفاده از ریاضیات دارید، باعث صرفه جویی بسیاری در وقت می شوند. 

مثالی از Less

مثال زیر به شما نشان می دهد که چطور از عملگرها در یک فایل Less استفاده کنید:

 

<html>
<head>
<title>Less Operations</title>
<link rel="stylesheet" type="text/css" href="/style.css" />
</head>
<body>
<h1>Example using Operations</h1>
<p class="myclass">LESS enables customizable, manageable and reusable style sheet for web site.</p>
</body>
</html>

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

 

@fontSize: 10px;
.myclass {
font-size: @fontSize * 2;
color:green;
}

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

 

lessc style.less style.css

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

 

.myclass {
font-size: 20px;
color: green;
}

 خروجی -->

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

  • فایل اچ تی ام ال بالای صفحه را با نام operations.html ذخیره کنید.
  • سپس این فایل اچ تی ام ال را در مرورگر خود باز کنید. خروجی به صورت زیر خواهد بود:  

 


مشاهده ی خروجی با استفاده از ادیتور آنلاین کدپن:

 با استفاده از ادیتور زیر، می توانید این مثال را به طور زنده مشاهده کنید. و با استفاده از گزینه ی بالا و سمت راست این ادیتور، می توانید وارد صفحه ی اصلی ادیتور کدپن شوید و این کدها را ویرایش کنید.

 

See the Pen Less آموزش by Ehsan Abbasi (@sbaloot) on CodePen.

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