Less (език)

от Уикипедия, свободната енциклопедия
Направо към навигацията Направо към търсенето
Less
LESS Logo.svg
Реализиране през 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 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 Компилатор

Вижте също[редактиране | редактиране на кода]

Източници[редактиране | редактиране на кода]

Външни препратки[редактиране | редактиране на кода]