عملگرها در 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.
- نوشته شده توسط احسان عباسی
- بازدید: 4019
دیدگاه‌ها
با سلام چگونه میتوان از فایل less در mvc5 استفاده کرد