استفاده از توابع در Less
توضیحات مقدماتی
Less با استفاده از جاوااسکریپت قادر به دستکاری مقادیر است. و به وسیله ی توابع از پیش تعریف شده، می تواند در برگه ی استایل ها، خصوصیات css عناصر HTML را مورد تغییر و دستکاری قرار دهد. Less چندین تابع برای دستکاری رنگ ها دارد که عبارتند از تابع round، تابع floor، تابع ceil و تابع percentage و ... .
مثالی از کاربرد توابع در Less
در مثال زیر، به کاربرد برخی توابع در Less اشاره می کنیم:
<html>
<head>
<title>Less Functions</title>
<link rel="stylesheet" type="text/css" href="/style.css" />
</head>
<body>
<h1>Example using Functions</h1>
<p class="mycolor">LESS enables customizable, manageable and reusable style sheet for web site.</p>
</body>
</html>
اکنون فایل style.less را ایجاد می کنیم:
@color: #FF8000;
@width:1.0;
.mycolor{
color: @color;
width: percentage(@width);
}
حالا با استفاده از دستورات زیر، فایل style.less را به فایل style.css کامپایل می کنیم:
lessc style.less style.css
با اجرای دستور بالا، فایل style.css به طور اتوماتیک ایجاد می شود. به صورت زیر:
.mycolor {
color: #FF8000;
width: 100%;
}
خروجی مثال بالا
با انجام گام های زیر، می توانید مشاهده کنید که کدهای بالا چگونه کار می کنند:
- ابتدا کد اچ تی ام ال بالای صفحه را با نام functions.html ذخیره کنید.
- اکنون این فایل را در مرورگر باز کنید. خروجی به صورت زیر خواهد بود.
مشاهده ی مثال بالا در ادیتور کدپن
با استفاده از ادیتور زیر، می توانید این مثال را به طور زنده مشاهده کنید. و با استفاده از گزینه ی بالا و سمت راست این ادیتور، می توانید وارد صفحه ی اصلی ادیتور کدپن شوید و این کدها را ویرایش کنید.
See the Pen less توابع در by Ehsan Abbasi (@sbaloot) on CodePen.
- نوشته شده توسط احسان عباسی
- بازدید: 3729
