Less (понякога стилизирано – LESS) е динамичен език за стилови множества, който може да се компилира до CSS (Cascading Style Sheets) и да работи на клиентска среда и на сървърна среда.Официален сайт на Less
Създаден от Алексис Селиер, Less е повлиян от SASS и е повлиял на новия „SCSS“ синтаксис на Sass, който използва неговия CSS-подобен блоково форматиращ синтаксис. Less е с отворен код. Първата му версия е написана на Ruby, но в следващите версии употребата на Ruby е отхвърлена и заменена от JavaScript. Вдлъбнатият синтаксис на Less е вложен метаезик, тъй като правилен CSS код е валиден Less код със същата семантика. Less предоставя следните механизми: променливи, влагане, миксини (виж по-долу), оператори и функции; главната разлика между Less и други CSS препроцесори е, че Less позволява компилиране в реално време чрез less.js от браузър.CSS – има ли SASS.js?
Променливи 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 поддържа и параметрични миксини, които могат да се съчетават като класове, но приемат параметри.
Влагане CSS поддържа логическо влагане, но самите кодови блокове не могат да бъдат влагани. 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; } #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 в софтуерна конструкция, вместо за статични правила.
От Less 1.4 нататък се поддържа вложени, наследствени правила чрез &:extends и @extends псевдоселектор. Преди това основната разлика между Less и други препроцесори като Sass била липсата на @extends за поддръжка на наследяване на правила между класове, което води до по-чист CSS и по-малко повтаряне на код.
Less е вдъхновен от Sass.Информация за Less. Sass е проектиран да опрости и разшири CSS, премахвайки неща като къдрави скоби. Less е направен да бъде колкото може по-близък до CSS и като резултат от това CSS може да се използва като валиден Less код.
Новите версии на Sass също започват да използват CSS-подобен синтаксис наречен SCSS (Sassy CSS).
Употреба в сайтове Less може да бъде използван в сайтове по няколко начина. Един вариант е да се включи JavaScript файла less.js и да се преведе кода в движение. Браузърът тогава изобразява изходния CSS. Друга опция е да се преведе Less кодът в чист CSS и да се качи CSS файлът към сайта. По този начин не се качват никакви .less файлове и на сайта не е нужен less.js JavaScript преводачът.
Less софтуер Име Описание Софтуерен лиценз Платформа Функционалност WinLess GUI Less компилатор Apache 2.0github.com Windows КомпилаторCrunch Less редактор и компилатор (нужен е Adobe AIR)GPLКриза в LICENSE.txt в github Windows, Mac OS XКомпилатор, редактор less.js-windows Прост инструмент за командния ред за Windows, който компилира *.less файлове към CSS, използвайки less.js.MIT Licensegithub.comWindows Компилатор less.app Less компилатор Proprietary Mac OS X Компилатор CodeKit Less компилатор Proprietary Mac OS X Компилатор LessEngine Less компилатор Free OpenCart Plugin Компилатор SimpLESS Less компилатор free but no explicit licenseФайл лиценз за github (контейнер) Windows Mac OS X Linux Компилатор Chirpy Less компилаторMs-PL 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-lessNode.js Grunt инструмент за конвертиране на Less към CSSOpen Source Node.js Компилатор Web Essentials Visual Studio приставка за поддръжка на Less и Sass Apache 2.0 Windows Синтаксно оцветяване, съдържателно помагане, компилатор clessc Чист C++ компилатор GPL at least Windows, Linux, MacOS Компилатор
Вижте също Sass (език за стилове)
Източници
Външни препратки
Less хранилище на изходния код (Git) Less Hat библиотека за миксини Sai разширение за миксини и CSS framework за разработка на Less и SASS/SCSS (Git)
Категория:Файлови формати Категория:Маркиращи езици Категория:Софтуерни библиотеки Категория:JavaScript