لس (زبان برنامه‌نویسی)

Less
طراحی شده توسط	الکسیس سلیر;
توسعه‌دهنده	الکسیس سلیر، دیمیتری فادایف;
ظهوریافته در	2009
انتشار پایدار	۲٫۷٫۲ ; ۴ ژانویهٔ ۲۰۱۷، ۶ ماه پیش;
شیوه نوع‌دهی	dynamic
زبان پیاده‌سازی	[[جاوااسکریپت]];
سیستم‌عامل	[[چندسکویی]];
پروانه	[[مجوز آپاچی]] ۲;
پسوند(های) نام پرونده	.less
وبگاه	lesscss.org
متأثر از
	[[شیوه‌نامه آبشاری]]، Sass
تأثیر گذاشته بر
	Sass, Less Framework, [بوتسترپ\|بوت‌استرپ (چارچوب انتهایی)];

Less (گاهی اوقات به صورت LESS) یک زبان پویای style sheet است که می‌تواند به صورت شیوه نامه‌های آبشاری (CSS) کامپایل شود در سمت کلاینت یا سرور اجرا شود.^[۱] Less توسط الکسیس سلیر طراحی شده‌است. Less از Sass تأثیر گرفته‌است و بر سینتکس جدیدتر "SCSS" از Sass تأثیر گذاشته‌است، که سازگار با سینتکس قالب‌بندی بلاک CSS-like است.^[۲] Less متن‌باز است. اولین نسخهٔ آن با زبان روبی نوشته شده‌است؛ اما در نسخه‌های بعدی استفاده از روبی پایان یافت و با جاوا اسکریپت جایگزین شد. سینتکس فاصله‌گذاری Less به صورت یک فرازبان تو در تو است به صورتی که CSS معتبر یک کد معتبر Less با معانی مشابه است. Less این مکانیزم‌ها را فراهم می‌کند: متغیر، nesting, mixins, operators و توابع؛ تفاوت اصلی بین Less و سایر زبان‌های CSS پیش‌کامپایل این است که Less اجازه می‌دهد که کامپایل به صورت real-time از طریق less.js توسط مرورگر انجام شود.^[۳]

متغیرها[ویرایش]

Less اجازه می‌دهد که متغیر تعریف شود. متغیرها در Less با یک علامت (@) تعریف می‌شوند. متغیر با یک علامت دونقطه (:) مقداردهی می‌شود.

در حین ترجمه، مقادیر متغیرها به فایل خروجی CSS وارد می‌شوند.

@pale-green-color: #4D926F;
#header {
  color: @pale-green-color;
}
h2 {
  color: @pale-green-color;
}

کد بالا در Less که به کد زیر در CSS کامپایل می‌شود.

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

مکسین‌ها[ویرایش]

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

.rounded-corners (@radius: 5px 10px 8px 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px 25px 35px 0px);
}

کد بالا در Less که به کد زیر در CSS کامپایل می‌شود.

#header {
  -webkit-border-radius: 5px 10px 8px 2px;
  -moz-border-radius: 5px 10px 8px 2px;
  border-radius: 5px 10px 8px 2px;
}
#footer {
  -webkit-border-radius: 10px 25px 35px 0px;
  -moz-border-radius: 10px 25px 35px 0px;
  border-radius: 10px 25px 35px 0px;
}

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

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 16px;
    a {
      text-decoration: none;
      color: red;
      &:hover {
        border-width: 1px;
        color: #fff;
      }
    }
  }
}

کد بالا در Less که به کد زیر در CSS کامپایل می‌شود.

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 16px;
}
#header p a {
  text-decoration: none;
  color: red;
}
#header p a:hover {
  border-width: 1px;
  color: #fff;
}

توابع و عملیات‌ها[ویرایش]

Less اجازهٔ تعریف عملیات‌ها و توابع را می‌دهد. عملیات‌ها اجازهٔ جمع، تفریق، تقسیم و ضرب مقادیر خصوصیت‌ها و رنگ‌ها را می‌دهد که می‌توانند برای ایجاد روابط پیچیده بین خصوصیت‌ها استفاده شوند. توابع، به صورت یک-به-یک با کد جاوااسکریپت نگاشت می‌شوند که اجازهٔ دستکاری متغیرها را می‌دهد.

@the-border: 1px;
@base-color: #111;
@red:        #842210;
#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 3;
}
#footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

کد بالا در Less که به کد زیر در CSS کامپایل می‌شود.

#header {
  color: #222;
  border-left: 1px;
  border-right: 3px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

مقایسه[ویرایش]

Sass[ویرایش]

هم Sass و هم Less هر دو پیش‌پردازندهٔ CSS هستند که اجازه می‌دهند کد CSS به جای قواعد استاتیک در یک ساختار برنامه‌نویسی نوشته شود.^[۴]

Less الهام‌گرفته از Sass است.^[۵] Sass به منظور ساده‌سازی و توسعه دادن CSS طراحی شده‌است، به طوری که چیزهایی ماند آکولاد از سینتکس حذف شده‌است. Less طراحی شده‌است تا نزدیکی به CSS ممکن باشد، و یک نتیجهٔ موجود CSS به صورت یک کد Less معتبر باشد.

نسخهٔ جدیدتر Sass نیز با سینتکس CSS-like به نام SCSS (Sassy CSS) معرفی شده‌است.

برای مقایسهٔ بیشتر سینتکس‌ها لینک زیر را ببینید: https://gist.github.com/674726.

استفاده در سایت‌ها[ویرایش]

Less می‌تواند به چند روش در سایت‌ها به کار برده شود. یک روش این است که یک فایل less.js وارد کد سایت شود تا در لحظه کد Less به CSS تبدیل شود. مرورگرها خروجی CSS را رندر می‌کنند. یکی دیگر از روش‌ها این است که کد Less به صورت CSS خالص رندر شود و در CSS سایت قرار بگیرد. در این روش فایل‌های .less آپلود نمی‌شوند و سایت نیازی به مبدل جاوااسکریپتی less.js ندارد

نرم‌افزارLess[ویرایش]

نام	توضیحات	مجوز نرم‌افزاری	سکو	کارکرد
WinLess	کامپایلر گرافیکی Less	مجوز آپاچی ۲٫۰^[۶]	ویندوز	کامپایلر
Crunch	ویرایشگر و کامپایلر Less (به Adobe AIR نیاز دارد)	پروانه عمومی همگانی گنو^[۷]	ویندوز، مک	ویرایشگر کامپایلر
less.js-windows	ابزار کامندلاین ساده برای ویندوز که فایل‌های .less را به وسیلهٔ less.js به CSS کامپایل می‌کند.	پروانه ام‌آی‌تی^[۸]	ویندوز	کامپایلر
less.app	کامپایلر Less	نرم‌افزار انحصاری	مک	کامپایلر
CodeKit	کامپایلر Less	نرم‌افزار انحصاری	مک	کامپایلر
LessEngine	کامپایلر Less	آزاد	OpenCart Plugin	کامپایلر
SimpLESS بایگانی‌شده در ۲۹ ژوئیه ۲۰۱۳ توسط Wayback Machine	کامپایلر Less	free but no explicit license^[۹]	ویندوز مک گنو/لینوکس	کامپایلر
Chirpy بایگانی‌شده در ۲۱ آوریل ۲۰۱۳ توسط Wayback Machine	کامپایلر	Ms-PL^[۱۰]	افزونهٔ Less برای ویژوال استودیو	کامپایلر
Mindscape Web Workbench	Syntax highlighting and IntelliSense for Less and Sass	نرم‌افزار انحصاری	افزونهٔ ویژوال استودیو	کامپایلر Syntax Highlighting
Eclipse Plugin for Less	افزونهٔ اکلیپس	EPL 1.0^[۱۱]	افزونهٔ اکلیپس	Syntax highlighting Content assist کامپایلر
mod_less	Apache2 module to compile Less on the fly	متن‌باز	گنو/لینوکس	کامپایلر
grunt-contrib-less	Node.js Grunt task to convert Less to CSS	متن‌باز	Node.js	کامپایلر
Web Essentials بایگانی‌شده در ۱۱ نوامبر ۲۰۱۶ توسط Wayback Machine	افزونهٔ ویژوال استودیو که Less و Sass را پشتیبانی می‌کند	مجوز آپاچی ۲٫۰	ویندوز	Syntax highlighting Content assist کامپایلر
clessc	Pure C++ compiler	پروانه عمومی همگانی گنو	آخرین نسخهٔ ویندوز مک گنو/لینوکس	کامپایلر

جستارهای وابسته[ویرایش]

منابع[ویرایش]

↑ Official Less website Official Less website
↑ Sass and Less بایگانی‌شده در ۲۱ ژوئن ۲۰۰۹ توسط Wayback Machine Sass and Less
↑ "css - Is there a SASS.js? Something like LESS.js?". Stack Overflow.
↑ What's Wrong With CSS بایگانی‌شده در ۳۱ ژانویه ۲۰۱۴ توسط Wayback Machine What's Wrong With CSS
↑ About Less About
↑ [۱] WinLess github Issue "License Information"
↑ Crunch's LICENSE.txt at github Crunch's LICENSE.txt at github
↑ [۲] github license
↑ [۳] license file at github (placeholder)
↑ [۴] بایگانی‌شده در ۱۶ ژوئن ۲۰۱۶ توسط Wayback Machine Chirpy License Information at CodePlex
↑ Eclipse Plugin for Less homepage Eclipse Plugin for Less homepage

پیوند به بیرون[ویرایش]

}

[main-1] Official Less website Official Less website

[compare-2] Sass and Less بایگانی‌شده در ۲۱ ژوئن ۲۰۰۹ توسط Wayback Machine Sass and Less

[no-sass-js-3] "css - Is there a SASS.js? Something like LESS.js?". Stack Overflow.

[whats-wrong-with-css-4] What's Wrong With CSS بایگانی‌شده در ۳۱ ژانویه ۲۰۱۴ توسط Wayback Machine What's Wrong With CSS

[about-5] About Less About

[6] [۱] WinLess github Issue "License Information"

[7] Crunch's LICENSE.txt at github Crunch's LICENSE.txt at github

[8] [۲] github license

[9] [۳] license file at github (placeholder)

[10] [۴] بایگانی‌شده در ۱۶ ژوئن ۲۰۱۶ توسط Wayback Machine Chirpy License Information at CodePlex

[11] Eclipse Plugin for Less homepage Eclipse Plugin for Less homepage

[۱]

[۲]

[۳]

[۴]

[۵]

[۶]

[۷]

[۸]

[۹]

[۱۰]

[۱۱]