Less (език)
Less (понякога стилизирано – LESS) е динамичен език за стилови множества, който може да се компилира до CSS (Cascading Style Sheets) и да работи на клиентска среда и на сървърна среда.[1]
Less | |
Реализиране през | 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 Архив на оригинала от 2013-07-29 в Wayback Machine. | Less компилатор | free but no explicit license[9] | Windows Mac OS X |
Компилатор |
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 | Компилатор |
Вижте също редактиране
Източници редактиране
- ↑ а б в г Официален сайт на 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.