%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده (تمدید شد)
سبد (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.

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