تعریف
LESS با الهام از کدهای جاوا اسکریپت، از طریق فانکشن های از قبل تعریف شده میتواند کدهای HTML را استایل دهد. از جمله این فانکشن ها میتوان به round function، floor function، ceil function، percentage function، و غیره اشاره کرد.
مثال
مثال زیر فانکشن در فایل 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%;
}
خروجی
بیایید دستورات زیر را انجام دهیم تا خروجی را ببینیم:
- کدهای html بالا را در فایل functions.html ذخیره کنید.
- فایل HTML را در مرورگر باز کنید، خروجی بدین شکل خواهد بود.
