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

Less
LESS Logo.svg
Реализиране през2009

Създаден от Алексис Селиер, 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 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 Visual Studio приставка за поддръжка на Less и Sass Apache 2.0 Windows Синтаксно оцветяване, съдържателно помагане, компилатор
clessc Чист C++ компилатор GPL at least Windows, Linux, MacOS Компилатор

Вижте същоРедактиране

ИзточнициРедактиране

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