آموزش LESS نحوه استفاده از توابع موجود در LESS

1396/4/31 علیرضا حاتمی نیا 270

less function  توابع موجود در less

مقدمه

سلام. به قسمت پنجم آموزش 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;
}

 

کلمات کلیدی

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت