تخفیف ویژه ماه مبارک رمضان، فرصت یادگیری با 35٪ تخفیف (کد تخفیف: ramazan)

سبد خرید (0)

استفاده از توابع در 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.