Less (език)

Less
	Less
Реализиране през	2009

Less (понякога стилизирано – LESS) е динамичен език за стилови множества, който може да се компилира до CSS (Cascading Style Sheets) и да работи на клиентска среда и на сървърна среда.^[1]

Създаден от Алексис Селиер, Less е повлиян от SASS и е повлиял на новия „SCSS“ синтаксис на Sass, който използва неговия CSS-подобен блоково форматиращ синтаксис.^[2] Less е с отворен код. Първата му версия е написана на Ruby, но в следващите версии употребата на Ruby е отхвърлена и заменена от JavaScript. Вдлъбнатият синтаксис на Less е вложен метаезик, тъй като правилен CSS код е валиден Less код със същата семантика. Less предоставя следните механизми: променливи, влагане, миксини (виж по-долу), оператори и функции; главната разлика между Less и други CSS препроцесори е, че Less позволява компилиране в реално време чрез less.js от браузър.^[3]

Променливи

Less позволява декларирането на променливи. Те се дефинират с кльомба (@). Присвояването на стойност се извършва чрез двоеточие (:).

По време на превод, стойностите на променливите са включени в изходния документ CSS.^[1]

@pale-green-color: #4D926F;

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

Горният Less код ще се компилира до следния CSS код:

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

Миксини

Миксините позволяват вграждането на всички свойства на даден клас в друг клас само чрез включването на името на дадения клас като свойство, което се държи подобно на константа или променлива. Също така те могат да се държат като функции и да приемат аргументи. CSS не поддържа миксини. Всеки повторен код трябва да бъде повторен на всяко място. Миксините дават възможност за по-ефективна и по-чиста повтаряемост, както и за по-лесна промяна на кода.^[1]

.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 поддържа и параметрични миксини, които могат да се съчетават като класове, но приемат параметри.

Влагане

CSS поддържа логическо влагане, но самите кодови блокове не могат да бъдат влагани. Less позволява влагане на селектори вътре в други селектори. Това прави наследяването по-ясно и стиловото множество по-късо.^[1]

#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;
}
#header p a:hover {
 border-width: 1px;
}

Функции и операции

Less позволява операции и функции. Операциите включват събиране, изваждане, умножение и делене на стойности и цветове, които могат да се използват за създаване на сложни връзки между свойства. Функциите се нанасят едно към едно с JavaScript код, позволявайки манипулация на стойностите.

@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: #333333;
 border-left: 1px;
 border-right: 3px;
}
#footer {
 color: #114411;
 border-color: #7d2717;
}

Сравнение със Sass

И Sass, и Less са CSS препроцесори, които позволяват писането на чист CSS в софтуерна конструкция, вместо за статични правила.^[4]

От Less 1.4 нататък се поддържа вложени, наследствени правила чрез &:extends и @extends псевдоселектор. Преди това основната разлика между Less и други препроцесори като Sass била липсата на @extends за поддръжка на наследяване на правила между класове, което води до по-чист CSS и по-малко повтаряне на код.

Less е вдъхновен от Sass.^[5] Sass е проектиран да опрости и разшири CSS, премахвайки неща като къдрави скоби. Less е направен да бъде колкото може по-близък до CSS и като резултат от това CSS може да се използва като валиден Less код.

Новите версии на Sass също започват да използват CSS-подобен синтаксис наречен SCSS (Sassy CSS).^[2]

Употреба в сайтове

Less може да бъде използван в сайтове по няколко начина. Един вариант е да се включи JavaScript файла less.js и да се преведе кода в движение. Браузърът тогава изобразява изходния CSS. Друга опция е да се преведе Less кодът в чист CSS и да се качи CSS файлът към сайта. По този начин не се качват никакви .less файлове и на сайта не е нужен less.js JavaScript преводачът.

Less софтуер

Име	Описание	Софтуерен лиценз	Платформа	Функционалност
WinLess	GUI Less компилатор	Apache 2.0^[6]	Windows	Компилатор
Crunch	Less редактор и компилатор (нужен е Adobe AIR)	GPL^[7]	Windows, Mac OS X	Компилатор, редактор
less.js-windows	Прост инструмент за командния ред за Windows, който компилира *.less файлове към CSS, използвайки less.js.	MIT License^[8]	Windows	Компилатор
less.app	Less компилатор	Proprietary	Mac OS X	Компилатор
CodeKit Архив на оригинала от 2013-11-19 в Wayback Machine.	Less компилатор	Proprietary	Mac OS X	Компилатор
LessEngine	Less компилатор	Free	OpenCart Plugin	Компилатор
SimpLESS Архив на оригинала от 2013-07-29 в Wayback Machine.	Less компилатор	free but no explicit license^[9]	Windows Mac OS X Linux	Компилатор
Chirpy	Less компилатор	Ms-PL^[10]	Visual Studio Plugin	Компилатор
Mindscape Web Workbench	Синтаксно оцветяване и IntelliSense за Less и Sass	Proprietary	Visual Studio Plugin	Компилатор, синтаксно оцветяване
Eclipse Plugin for Less	Eclipse приставка	EPL 1.0	Eclipse Plugin	Синтаксно оцветяване, съдържателно помагане, компилатор
mod_less	Apache2 модул за компилиране на Less в движение	Open Source	Linux	Компилатор
grunt-contrib-less	Node.js Grunt инструмент за конвертиране на Less към CSS	Open Source	Node.js	Компилатор
Web Essentials Архив на оригинала от 2016-11-11 в Wayback Machine.	Visual Studio приставка за поддръжка на Less и Sass	Apache 2.0	Windows	Синтаксно оцветяване, съдържателно помагане, компилатор
clessc	Чист C++ компилатор	GPL	at least Windows, Linux, MacOS	Компилатор

Вижте също

Sass (език за стилове)

Източници

↑ ^а ^б ^в ^г Официален сайт на Less
↑ ^а ^б Sass и Less, архив на оригинала от 21 юни 2009, https://web.archive.org/web/20090621074106/http://nex-3.com/posts/83-sass-and-less, посетен на 9 ноември 2016
↑ CSS – има ли SASS.js?
↑ А какво не е наред с CSS // Архивиран от оригинала на 2014-01-31. Посетен на 2016-11-09.
↑ Информация за Less.
↑ github.com
↑ Криза в LICENSE.txt в github
↑ github.com
↑ Файл лиценз за github (контейнер)
↑ Тест лиценз информация на уеб сайта на codeplex // Архивиран от оригинала на 2016-06-16. Посетен на 2016-11-09.

Външни препратки

[main-1] а ^б ^в ^г Официален сайт на Less

[compare-2] а ^б Sass и Less, архив на оригинала от 21 юни 2009, https://web.archive.org/web/20090621074106/http://nex-3.com/posts/83-sass-and-less, посетен на 9 ноември 2016

[no-sass-js-3] CSS – има ли SASS.js?

[whats-wrong-with-css-4] А какво не е наред с CSS // Архивиран от оригинала на 2014-01-31. Посетен на 2016-11-09.

[about-5] Информация за Less.

[6] thub.com

[7] Криза в LICENSE.txt в github

[8] thub.com

[9] Файл лиценз за github (контейнер)

[10] Тест лиценз информация на уеб сайта на codeplex // Архивиран от оригинала на 2016-06-16. Посетен на 2016-11-09.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]