۱۴
اسفند

جلسه ۰۷ : توابع در LESS

دسته‌بندی‌ها :

نوع محتوا
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن ، و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند. در خدمت شما هستیم با جلسه دیگری از آموزش دوره LESS این جلسه قصد خواهیم داشت درمورد توابع در LESS توضیحاتی بدهیم امیدوارم از مطالب این دوره بهره کافی را ببرید.با ما همراه باشید..با توابع موجود در less و کاربرد توابع در LESS

نحوه استفاده از توابع در LESS

یکی از قابلیت های مهم در LESS استفاده از توابع می باشد که این توابع به صورت پیش فرض در LESS موجود می باشند.

با استفاده از این توابع شما می توانید به راحتی رشته ها و رنگ ها را تغییر دهید و محاسبات ریاضی را نیز انجام دهید.

لیست توابع موجود در less در وبسایت توسعه دهندگان Less موجود می باشد.

تابع‌ها در برنامه‌نویسی از مفاهم بسیار مهم و کاربردی به شمار می‌روند.

یک تابع یا function، قطعه‌ای از کدهای برنامه‌نویسی است که با یک نام از سایر بخش‌های برنامه جدا می‌شود.

یک تابع برای انجام یک فعالیت خاص و مشخص برنامه‌نویسی می‌شود و در طول اجرای برنامه ممکن است بارها اجرا یا فراخوانی شود.

Less با استفاده از جاوااسکریپت قادر به تغییر مقادیر است و به وسیله ی توابع از پیش تعریف شده، می تواند در برگه ی استایل ها، خصوصیات css عناصر HTML را مورد تغییر و دستکاری قرار دهد.

Less چندین تابع برای دستکاری رنگ ها دارد که عبارتند از تابع round، تابع floor، تابع ceil و تابع percentage و … .

مثال زیر چگونگی استفاده از توابع در 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>

<html>

<head>

<title>Less Functions</title>

</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 را بسازید:

style.less

مثال :

@color: #FF8000;
@width:1.0;
.mycolor {
   color: @color;
   width: percentage(@width);
}

@color: #FF8000;

@width:1.0;

.mycolor {

color: @color;

width: percentage(@width);

}

حالا میتوانیم با دستور زیر فایل style.less را به فایل style.css کامپایل کنیم:

مثال :

lessc style.less style.css

1	lessc style.less style.css

بعد از جرای دستور بالا فایل style.css زیر به صورت خودکار ایجاد خواهد شد:

style.css

مثال :

.mycolor {
   color: #FF8000;
   width: 100%;
}

.mycolor {

color: #FF8000;

width: 100%;

}

خروجی

با انجام گام های زیر، می توانید مشاهده کنید که کدهای بالا چگونه کار می کنند:

ابتدا کد اچ تی ام ال بالای صفحه را با نام functions.html ذخیره کنید.
اکنون این فایل را در مرورگر باز کنید. خروجی به صورت زیر خواهد بود.

توابع در LESS

کلام آخر

در LESS دو متغیر color و width را جهت تعریف رنگ ها و اندازه عرض عنصر تعریف می کنیم و مقادیر آن ها را نیز معین می کنیم.

سپس از تابع percentage جهت تغییر اندازه به درصد، و از تابع saturate جهت خلوص یا اشباع رنگ،

و از تابع lighten جهت روشن کردن رنگ و از تابع spin جهت چرخاندن رنگ استفاده می کنیم.

به اشتراک بگذارید

LESS استفاده از توابع ,تغییر مقادیر در less ,توابع در Less ,توابع موجود در less

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۷ : توابع در LESS

مقدمه

نحوه استفاده از توابع در LESS

style.less

style.css

خروجی

کلام آخر

لیست مطالب دوره

مقدمه

ویژگی های زبان برنامه نویسی LESS

توابع در LESS

کاربرد LESS

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ