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

Меньше

Разработано	Alexis Sellier
Разработчик	Алексис Селье, Дмитрий Фадеев
Впервые появился	2009 г.; 11 лет назад (2009 г.)
Стабильный выпуск	3.9.0 / 28 ноября 2018 г.; 22 месяца назад (28.11.2018)
Дисциплина ввода	Динамический
Язык реализации	JavaScript
OS	Кросс-платформенный
Лицензия	Лицензия Apache 2.0
Расширения имен файлов	.less
Веб-сайт	lesscss.org
Под влиянием
CSS, Sass
Под влиянием
Sass, Less Framework, Bootstrap (v3)

Less (Leaner Style Sheets; иногда стилизованный как LESS ) - это динамический препроцессор язык таблиц стилей, который может быть скомпилированным в каскадные таблицы стилей (CSS) и запускаться на стороне клиента или сервера. Разработанный Alexis Sellier, Less создан под влиянием Sass и повлиял на новый синтаксис SCSS Sass, который адаптировал его CSS-подобный синтаксис форматирования блоков. Less - это открытый код. Его первая версия была написана на Ruby ; однако в более поздних версиях использование Ruby было устаревшим и заменено на JavaScript. Синтаксис Less с отступом - это вложенный метаязык, так как действительный CSS является действительным кодом Less с той же семантикой . Less предоставляет следующие механизмы: переменные, вложенность, миксины, операторы и функции ; Основное различие между Less и другими прекомпиляторами CSS заключается в том, что Less позволяет выполнять компиляцию в реальном времени через less.js браузером.

• 1 Возможности
  • 1.1 Переменные
  • 1.2 Mixins
  • 1.3 Функции и операции
• 2 Сравнение
  • 2.1 Sass
• 3 Использование на сайтах
• 4 Меньше программного обеспечения
• 5 См. также
• 6 Ссылки
• 7 Внешние ссылки

Переменные

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

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

@ pale-green-color: # 4D926F; # заголовок {цвет: @ бледно-зеленый-цвет; } div class="ht" {цвет: @ бледно-зеленый-цвет; }

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

#header {цвет: # 4D926F; } div class="ht" {цвет: # 4D926F; }

Миксины

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

. Round-corners (@radius: 5px 10px 8px 2px) {-webkit-border-radius: @radius; -moz-border-radius: @radius; радиус границы: @radius; } #header {. закругленные углы; } #footer {. Round-corners (10px 25px 35px 0px); }

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

#header {-webkit-border-radius: 5px 10px 8px 2px; -moz-border-radius: 5px 10px 8px 2px; радиус границы: 5px 10px 8px 2px; } #footer {-webkit-border-radius: 10px 25px 35px 0px; -moz-border-radius: 10px 25px 35px 0px; радиус границы: 10 пикселей 25 пикселей 35 пикселей 0 пикселей; }

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

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

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

#header h1 {font-size: 26px; font-weight: жирный; } #header p {размер шрифта: 16 пикселей; } #header p a {украшение текста: нет; красный цвет; } #header p a: hover {border-width: 1px; цвет: #fff; }

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

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

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

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

#header {color: # 333; граница слева: 1px; граница справа: 3 пикселя; } #footer {color: # 114411; цвет границы: # 7d2717; }

Sass

И Sass, и Less являются препроцессорами CSS, которые позволяют писать чистый CSS в программной конструкции вместо статических правил.

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

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

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

• Sass (язык таблиц стилей)
• Stylus (язык таблиц стилей)

• Официальные w ebsite
• Меньше репозитория исходного кода (Git)
• Библиотека миксинов LESS Hat
• Сообщите о расширении миксинов и структуре разработки CSS для LESS SASS / SCSS (Git)