Меньше (язык таблиц стилей) - Less (stylesheet language)

Меньше
МЕНЬШЕ Logo.svg
РазработаноАлексис Селье
РазработчикАлексис Селье, Дмитрий Фадеев
Впервые появился2009; 11 лет назад (2009)
Стабильный выпуск
3.9.0[1] / 28 ноября 2018 г.; 2 года назад (2018-11-28)
Печатная дисциплинаДинамический
Язык реализацииJavaScript
Операционные системыКроссплатформенность
ЛицензияЛицензия Apache 2.0
Расширения имени файла.меньше
Интернет сайтlesscss.org
Под влиянием
CSS, Sass
Под влиянием
Sass, Без рамки, Бутстрап (v3)

Меньше (Таблицы стилей Leaner; иногда стилизованные под МЕНЬШЕ) является динамическим препроцессор язык таблиц стилей что может быть скомпилировано в Каскадные таблицы стилей (CSS) и запускать на стороне клиента или сервера.[2]На создание Lessа вдохновил Алексис Селье Sass и повлиял на новый синтаксис «SCSS» Sass, который адаптировал его CSS-подобный синтаксис форматирования блоков.[3] Меньше Открытый исходный код. Его первая версия была написана на Рубин; однако в более поздних версиях использование Ruby было устарел и заменен на JavaScript. Синтаксис Less с отступом - вложенный метаязык, поскольку действительный CSS действителен Меньше кода с тем же семантика. В Less предусмотрены следующие механизмы: переменные, гнездование, миксины, операторы и функции; Основное различие между Less и другими прекомпиляторами CSS заключается в том, что Less позволяет выполнять компиляцию в реальном времени через less.js браузером.[2][4]

Функции

Переменные

Меньше позволяет определять переменные. Переменные в Less определяются с помощью в знак (@). Переменная назначение делается с двоеточие (:).

Во время перевода значения переменных вставляются в выходной документ CSS.[2]

@бледный-цвет зеленый: #4D926F;#заголовок {  цвет: @бледно-зеленый цвет;}h2 {  цвет: @бледно-зеленый цвет;}

Приведенный выше код в Less будет компилироваться в следующий код CSS.

#заголовок {  цвет: # 4D926F;}h2 {  цвет: # 4D926F;}

Миксины

Mixins позволяет встраивать все свойства класса в другой класс, включая имя класса как одно из его свойств, таким образом, ведя себя как своего рода постоянный или переменная. Они также могут вести себя как функции и принимать аргументы. CSS не поддерживает миксины: любой повторяющийся код должен повторяться в каждом месте. Mixins позволяет более эффективно и чисто повторять код, а также упрощает его изменение.[2]

.закругленные углы (@радиус: 5 пикселей 10 пикселей 8 пикселей 2 пикселя) {  -webkit-border-radius: @радиус;  -моз-border-radius: @радиус;  border-radius: @радиус;}#заголовок {  .закругленные углы;}#нижний колонтитул {  Закругленные углы (10 пикселей 25 пикселей 35 пикселей 0px);}

Приведенный выше код в Less будет компилироваться в следующий код CSS:

#заголовок {  -webkit-border-radius: 5px 10px 8px 2px;  -моз-border-radius: 5px 10px 8px 2px;  border-radius: 5px 10px 8px 2px;}#нижний колонтитул {  -webkit-border-radius: 10px 25px 35px 0px;  -моз-border-radius: 10px 25px 35px 0px;  border-radius: 10px 25px 35px 0px;}

В Less есть особый тип набора правил, называемый параметрическими миксинами, который можно смешивать с похожими классами, но принимает параметры.

#заголовок {  h1 {    размер шрифта: 26px;    font-weight: смелый;  }  п {    размер шрифта: 16px;    а {      текст-украшение: никто;      цвет: красный;      &: hover {        ширина рамки: 1px;        цвет: #fff;      }    }  }}

Приведенный выше код в Less будет компилироваться в следующий код CSS:

#заголовок h1 {  размер шрифта: 26px;  font-weight: смелый;}#заголовок п {  размер шрифта: 16px;}#заголовок п а {  текст-украшение: никто;  цвет: красный;}#заголовок п а:парить {  ширина рамки: 1px;  цвет: #fff;}

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

Меньше разрешает операции и функции. Операции позволяют складывать, вычитать, делить и умножать значения и цвета свойств, что может использоваться для создания сложных отношений между свойствами. Функции взаимно однозначно отображаются с кодом JavaScript, позволяя манипулировать значениями.

@the-граница: 1px;@основание-цвет: #111;@красный:        #842210;#заголовок {  цвет: @основной цвет * 3;  граница слева: @границы;  граница справа: @границы * 3;}#нижний колонтитул {  цвет: @основной цвет + #003300;  цвет границы: обесцветить(@красный, 10%);}

Приведенный выше код в Less будет компилироваться в следующий код CSS:

#заголовок {  цвет: #333;  граница слева: 1px;  граница справа: 3px;}#нижний колонтитул {  цвет: #114411;  цвет границы: # 7d2717;}

Сравнение

Sass

Обе Sass и Less - это препроцессоры CSS, которые позволяют писать чистый CSS в программной конструкции вместо статических правил.[5]

Less вдохновлен Sass.[6][3] Sass был разработан как для упрощения, так и для расширения CSS, поэтому такие вещи, как фигурные скобки, были удалены из синтаксиса. Less был разработан так, чтобы быть максимально приближенным к CSS, и в результате существующий CSS можно использовать как действительный код Less.[7]

В более новых версиях Sass также появился синтаксис, похожий на CSS, который называется SCSS (Sassy CSS).

Использование на сайтах

Less можно применить к сайтам разными способами. Один из вариантов - включить less.js JavaScript файл для преобразования кода на лету. Затем браузер отображает выходной CSS. Другой вариант - преобразовать код Less в чистый CSS и загрузить этот CSS на сайт. При использовании этого параметра файлы .less не загружаются, и сайту не требуется конвертер JavaScript less.js.

Меньше программного обеспечения

ИмяОписаниеЛицензия на программное обеспечениеПлатформаФункциональность
WinLessКомпилятор без графического интерфейсаApache 2.0[8]WindowsКомпилятор
ХрустМеньше редактора и компилятора (требуется Adobe AIR)GPL[9]Windows, Mac OS XКомпилятор
редактор
less.js-windowsПростая утилита командной строки для Windows, которая компилирует файлы * .less в CSS с помощью less.js.Лицензия MIT[10]WindowsКомпилятор
less.appМеньше компилятораПроприетарныйMac OS XКомпилятор
CodeKitМеньше компилятораПроприетарныйMac OS XКомпилятор
LessEngineМеньше компилятораСвободныйПлагин OpenCartКомпилятор
ПРОСТОМеньше компиляторабесплатно, но без явной лицензии[11]Windows
Mac OS X
Linux		Компилятор
ВеселыйМеньше компилятораMs-PL[12]Плагин Visual StudioКомпилятор
Инструментальные средства Mindscape WebПодсветка синтаксиса и IntelliSense для Less и SassПроприетарныйПлагин Visual StudioКомпилятор
Подсветка синтаксиса
Плагин Eclipse для меньшегоПлагин EclipseEPL 1.0[13]Плагин EclipseПодсветка синтаксиса
Помощник по содержанию
Компилятор
mod_lessМодуль Apache2 для компиляции Less на летуОткрытый исходный кодLinuxКомпилятор
хрюканье без вкладаЗадача Node.js Grunt для преобразования Less в CSSОткрытый исходный кодNode.jsКомпилятор
Веб-основыРасширение Visual Studio с поддержкой Less и SassApache 2.0WindowsПодсветка синтаксиса, поддержка содержимого, компилятор
clesscЧистый компилятор C ++GPLкак минимум Windows, Linux, MacOSКомпилятор
Меньше WebCompilerВеб-компиляторМассачусетский технологический институткак минимум Windows, Linux, MacOSКомпилятор, Подсветка синтаксиса, Минификатор

Смотрите также

Рекомендации

  1. ^ «ЧАНГЕЛОГ». GitHub.
  2. ^ а б c d Официальный сайт Less Официальный сайт Less
  3. ^ а б Sass и меньше В архиве 2009-06-21 на Wayback Machine Sass и меньше
  4. ^ "css - есть ли SASS.js? Что-то вроде LESS.js?". Переполнение стека.
  5. ^ Что не так с CSS Что не так с CSS
  6. ^ О Меньше О
  7. ^ Сравнение Sass / Less
  8. ^ [1] WinLess github Проблема "Информация о лицензии"
  9. ^ LICENSE.txt Crunch на github LICENSE.txt Crunch на github
  10. ^ [2] лицензия github
  11. ^ [3] файл лицензии на github (заполнитель)
  12. ^ [4] Информация о лицензии Chirpy на CodePlex
  13. ^ Плагин Eclipse для домашней страницы Less Плагин Eclipse для домашней страницы Less

внешняя ссылка