Less ( Leaner Style Sheets ; иногда стилизуется как LESS ) — динамический язык таблиц стилей препроцессора , который может быть скомпилирован в каскадные таблицы стилей (CSS) и запущен на стороне клиента или сервера. [2] Разработанный Алексисом Селье, Less находится под влиянием Sass и повлиял на новый синтаксис Sass «SCSS», который адаптировал его синтаксис форматирования блоков, похожий на CSS. [3] Less — проект с открытым исходным кодом . Его первая версия была написана на Ruby ; однако в более поздних версиях использование Ruby было прекращено и заменено на JavaScript . Отступный синтаксис Less является вложенным метаязыком , поскольку допустимый CSS является допустимым кодом Less с той же семантикой . Less предоставляет следующие механизмы: переменные , вложенность , миксины , операторы и функции ; основное отличие Less от других прекомпиляторов CSS заключается в том, что Less позволяет браузеру выполнять компиляцию в реальном времени через less.js. [2] [4]
Less позволяет определять переменные. Переменные в Less определяются знаком @ . Назначение переменных выполняется с помощью двоеточия ( :).
Во время перевода значения переменных вставляются в выходной CSS-документ. [2]
@pale -зеленый-цвет : # 4D926F ; # заголовок { цвет : @ бледно-зеленый-цвет ; } h2 { цвет : @ бледно-зеленый-цвет ; } Приведенный выше код в Less будет скомпилирован в следующий CSS-код.
# заголовок { цвет : #4D926F ; } h2 { цвет : #4D926F ; } Миксины позволяют встраивать все свойства класса в другой класс, включая имя класса как одно из его свойств, таким образом ведя себя как своего рода константа или переменная. Они также могут вести себя как функции и принимать аргументы. CSS не поддерживает миксины: любой повторяющийся код должен быть повторен в каждом месте. Миксины позволяют более эффективно и чисто повторять код, а также проще изменять код. [2]
. rounded-corners ( @radius : 5px 10px 8px 2px ) { -webkit- border-radius : @ radius ; -moz- border-radius : @ radius ; border-radius : @ radius ; } # заголовок { .rounded-corners ; } # нижний колонтитул { .rounded-corners(10px 25px 35px 0px) ; } Приведенный выше код в Less будет скомпилирован в следующий CSS-код:
# заголовок { -webkit- border-radius : 5 пикселей 10 пикселей 8 пикселей 2 пикселей ; -moz- border-radius : 5 пикселей 10 пикселей 8 пикселей 2 пикселей ; border-radius : 5 пикселей 10 пикселей 8 пикселей 2 пикселей ; } # нижний колонтитул { -webkit- border-radius : 10 пикселей 25 пикселей 35 пикселей 0 пикселей ; -moz- border-radius : 10 пикселей 25 пикселей 35 пикселей 0 пикселей ; border-radius : 10 пикселей 25 пикселей 35 пикселей 0 пикселей ; } Less имеет специальный тип набора правил, называемый параметрическими миксинами, которые можно смешивать в похожих классах, но которые принимают параметры.
# заголовок { h1 { размер шрифта : 26 пикселей ; начертание шрифта : жирный ; } p { размер шрифта : 16 пикселей ; a { оформление текста : нет ; цвет : красный ; &:hover { ширина границы : 1 пиксель ; цвет : #fff ; } } } } Приведенный выше код в Less будет скомпилирован в следующий CSS-код:
# заголовок h1 { font-size : 26 px ; font-weight : bold ; } # заголовок p { font-size : 16 px ; } # заголовок p a { text-decoration : none ; color : red ; } # заголовок p a : hover { border-width : 1 px ; color : #fff ; } Less позволяет выполнять операции и функции. Операции позволяют выполнять сложение, вычитание, деление и умножение значений свойств и цветов, что может использоваться для создания сложных отношений между свойствами. Функции сопоставляются один к одному с кодом JavaScript, позволяя манипулировать значениями.
@ the-border : 1px ; @base -color : # 111 ; @red : # 842210 ; # заголовок { цвет : @ базовый-цвет * 3 ; граница-слева : @ граница ; граница-справа : @ граница * 3 ; } # нижний колонтитул { цвет : @ базовый-цвет + #003300 ; граница-цвет : обесцвечивание ( @ красный , 10 % ); } Приведенный выше код в Less будет скомпилирован в следующий CSS-код:
# заголовок { цвет : #333 ; граница слева : 1 пиксель ; граница справа : 3 пиксель ; } # нижний колонтитул { цвет : #114411 ; граница цвета : #7d2717 ; } И Sass , и Less являются препроцессорами CSS, которые позволяют писать чистый CSS в программной конструкции вместо статических правил. [5]
Less вдохновлен Sass. [6] [3] Sass был разработан для упрощения и расширения CSS, поэтому такие вещи, как фигурные скобки, были удалены из синтаксиса. Less был разработан, чтобы быть максимально приближенным к CSS, и в результате существующий CSS может использоваться как допустимый код Less. [7]
В новых версиях Sass также появился синтаксис, похожий на CSS, который называется SCSS (Sassy CSS).
Less можно применять к сайтам несколькими способами. Один из вариантов — включить файл JavaScript less.js для преобразования кода на лету. Затем браузер визуализирует выходной CSS. Другой вариант — визуализировать код Less в чистый CSS и загрузить CSS на сайт. При использовании этого варианта файлы .less не загружаются, и сайту не нужен конвертер JavaScript less.js.