مقدمه
سلام. به قسمت پنجم آموزش LESS از سری آموزش های برنامه نویسی و طراحی وب خوش آمدید.در جلسه گذشته با آموزش برگرداندن رشته یا scaping در LESS در خدمت شما بودیم. در این جلسه به آموزش توابع LESS و کاربرد آن ها در LESS می پردازیم.
توابع LESS
یکی از قابلیت های مهم در LESS استفاده از توابع می باشد که این توابع به صورت پیش فرض در LESS موجود می باشند. با استفاده از این توابع شما می توانید به راحتی رشته ها و رنگ ها را تغییر دهید و محاسبات ریاضی را نیز انجام دهید.
لیست توابع موجود در less در وبسایت توسعه دهندگان Less موجود می باشد.
استفاده از توابع LESS
فرض کنید کلاس myClass در صفحه html زیر برای تگ <p> موجود است.
<html> <head> <title>Tutorial Less Functions</title> <link rel = "stylesheet" type = "text/css" href = "style.css" /> </head> <body> <h1>Example using Functions in LESS</h1> <p class = "myClass"> Less let you use Functions </p> </body> </html>
در LESS دو متغیر color و width را جهت تعریف رنگ ها و اندازه عرض عنصر تعریف می کنیم و مقادیر آن ها را نیز معین می کنیم.
سپس از تابع percentage جهت تغییر اندازه به درصد، و از تابع saturate جهت خلوص یا اشباع رنگ، و از تابع lighten جهت روشن کردن رنگ و از تابع spin جهت چرخاندن رنگ استفاده می کنیم.
حال فایل style.less را می سازیم :
@color: #f04615; @width: 0.5; .myClass { width: percentage(0.5); color: saturate(@color, 5%); background-color: spin(lighten(@color, 25%), 8); }
حال توسط دستور زیر فایل style.less را به فایل style.css کامپایل می کنیم:
lessc style.less style.css
با اجرای کد بالا فایل style.css به شکل زیر ساخته می شود.
.myClass { width: 50%; color: #f6430f; background-color: #f8b38d; }
