Less (Leaner Style Sheets; иногда стилизованный под LESS ) - это язык динамических таблиц стилей препроцессора, который можно скомпилировать в каскадные таблицы стилей (CSS) и запустить на стороне клиента или сервера. [2] Разработанный Alexis Sellier, Less находится под влиянием Sass и повлиял на новый синтаксис «SCSS» Sass, который адаптировал его CSS-подобный синтаксис форматирования блоков. [3] Less - это открытый исходный код . Его первая версия была написана на Ruby ; однако в более поздних версиях использование Ruby устарело и заменено JavaScript . Синтаксис Less с отступом - этовложенный метаязык , поскольку действительный CSS действителен Меньше кода с той же семантикой . Less предоставляет следующие механизмы: переменные , вложение , миксины , операторы и функции ; Основное различие между Less и другими прекомпиляторами CSS заключается в том, что Less позволяет выполнять компиляцию в реальном времени через less.js браузером. [2] [4]
Разработано | Алексис Селье |
---|---|
Разработчик | Алексис Селье, Дмитрий Фадеев |
Впервые появился | 2009 |
Стабильный выпуск | 4.1.1 [1] / 30 января 2021 г . |
Печатная дисциплина | Динамический |
Язык реализации | JavaScript |
Операционные системы | Кроссплатформенность |
Лицензия | Лицензия Apache 2.0 |
Расширения имени файла | .меньше |
Веб-сайт | lesscss |
Под влиянием | |
CSS , Sass | |
Под влиянием | |
Sass , Less Framework, Bootstrap (v3) |
Функции
Переменные
Less позволяет определять переменные. Переменные в Less обозначаются знаком (@). Присваивание переменной выполняется с помощью двоеточия (:).
Во время перевода значения переменных вставляются в выходной документ CSS. [2]
@pale -green-color : # 4D926F ;# заголовок { цвет : @ бледно-зеленый-цвет ; } h2 { цвет : @ бледно-зеленый-цвет ; }
Приведенный выше код в Less будет компилироваться в следующий код CSS.
# заголовок { цвет : # 4D926F ; } h2 { цвет : # 4D926F ; }
Миксины
Mixins позволяет встраивать все свойства класса в другой класс, включая имя класса как одно из его свойств, таким образом ведя себя как своего рода константа или переменная. Они также могут вести себя как функции и принимать аргументы. CSS не поддерживает миксины: любой повторяющийся код должен повторяться в каждом месте. Mixins позволяет более эффективно и чисто повторять код, а также упрощает его изменение. [2]
. Закругленные углы- ( @radius : 5px 10px 8px 2рх ) { -webkit- границы радиус : @ радиус ; -moz- граничный радиус : @ радиус ; граничный радиус : @ радиус ; }# заголовок {. закругленные углы ; } # Нижнего колонтитула { .rounded-углы (10px 25px 35px 0px) ; }
Приведенный выше код в Less будет компилироваться в следующий код CSS:
# header { -webkit- border-radius : 5 пикселей 10 пикселей 8 пикселей 2 пикселей ; -moz- border-radius : 5 пикселей 10 пикселей 8 пикселей 2 пикселей ; радиус границы : 5 пикселей 10 пикселей 8 пикселей 2 пикселей ; } # нижний колонтитул { -webkit- border-radius : 10 пикселей 25 пикселей 35 пикселей 0 пикселей ; -moz- border-radius : 10 пикселей 25 пикселей 35 пикселей 0 пикселей ; радиус границы : 10 пикселей 25 пикселей 35 пикселей 0 пикселей ; }
В Less есть особый тип набора правил, называемый параметрическими миксинами, который можно смешивать с похожими классами, но принимает параметры.
# header { h1 { размер шрифта : 26 пикселей ; font-weight : жирный ; } p { размер шрифта : 16 пикселей ; а { текст-украшение : нет ; цвет : красный ; &: hover { ширина границы : 1 пиксель ; цвет : #fff ; } } } }
Приведенный выше код в Less будет компилироваться в следующий код CSS:
# header h1 { размер шрифта : 26 пикселей ; font-weight : жирный ; } # header p { размер шрифта : 16 пикселей ; } # заголовок p a { украшение текста : нет ; цвет : красный ; } # header p a : hover { ширина границы : 1 пиксель ; цвет : #fff ; }
Функции и операции
Меньше разрешает операции и функции. Операции позволяют складывать, вычитать, делить и умножать значения и цвета свойств, которые можно использовать для создания сложных отношений между свойствами. Функции взаимно однозначно сопоставляются с кодом JavaScript, позволяя манипулировать значениями.
@the -border : 1px ; @base -color : # 111 ; @red : # 842210 ;# заголовок { цвет : @ базовый цвет * 3 ; граница слева : @ граница ; граница справа : @ граница * 3 ; } # нижний колонтитул { color : @ base-color + # 003300 ; цвет границы : обесцвечивание ( @ красный , 10 % ); }
Приведенный выше код в Less будет компилироваться в следующий код CSS:
# заголовок { цвет : # 333 ; граница слева : 1 пиксель ; граница справа : 3 пикселя ; } # нижний колонтитул { цвет : # 114411 ; цвет границы : # 7d2717 ; }
Сравнение
Sass
И Sass, и Less являются препроцессорами CSS, которые позволяют писать чистый CSS в программной конструкции вместо статических правил. [5]
Less вдохновлен Sass. [6] [3] Sass был разработан как для упрощения, так и для расширения CSS, поэтому такие вещи, как фигурные скобки, были удалены из синтаксиса. Less был разработан так, чтобы быть максимально приближенным к CSS, и в результате существующий CSS можно использовать как действительный код Less. [7]
В более новых версиях Sass также появился синтаксис, похожий на CSS, который называется SCSS (Sassy CSS).
Использование на сайтах
Меньше можно применить к сайтам разными способами. Один из вариантов - включить файл JavaScript less.js для преобразования кода на лету. Затем браузер отображает выходной CSS. Другой вариант - преобразовать код Less в чистый CSS и загрузить CSS на сайт. При использовании этого параметра файлы .less не загружаются, и сайту не требуется конвертер JavaScript less.js.
Меньше программного обеспечения
Имя | Описание | Лицензия на программное обеспечение | Платформа | Функциональность |
---|---|---|---|---|
WinLess - графический интерфейс Windows для less.js на Wayback Machine (архивировано 2 июня 2015 г.) | Компилятор без графического интерфейса | Apache 2.0 [8] | Окна | Компилятор |
Хруст | Меньше редактора и компилятора (требуется Adobe AIR) | GPL [9] | Windows, Mac OS X | Редактор компилятора |
less.js-windows | Простая утилита командной строки для Windows, которая компилирует файлы * .less в CSS с помощью less.js. | Лицензия MIT [10] | Окна | Компилятор |
less.app | Меньше компилятора | Проприетарный | Mac OS X | Компилятор |
CodeKit | Меньше компилятора | Проприетарный | Mac OS X | Компилятор |
LessEngine | Меньше компилятора | Бесплатно | Плагин OpenCart | Компилятор |
ПРОСТО | Меньше компилятора | бесплатно, но без явной лицензии [11] | Windows Mac OS X Linux | Компилятор |
Веселый | Меньше компилятора | Г-жа-ПЛ [12] | Плагин Visual Studio | Компилятор |
Инструментальные средства Mindscape Web | Подсветка синтаксиса и IntelliSense для Less и Sass | Проприетарный | Плагин Visual Studio | Подсветка синтаксиса компилятора |
Плагин Eclipse для меньшего | Плагин Eclipse | EPL 1.0 [13] | Плагин Eclipse | Подсветка синтаксиса Компилятор поддержки содержимого |
mod_less | Модуль Apache2 для компиляции Less на лету | Открытый источник | Linux | Компилятор |
хрюканье без вклада | Задача Node.js Grunt по преобразованию Less в CSS | Массачусетский технологический институт [14] | Node.js | Компилятор |
Веб-основы | Расширение Visual Studio с поддержкой Less и Sass | Apache 2.0 [15] | Окна | Подсветка синтаксиса, поддержка содержимого, компилятор |
clessc | Чистый компилятор C ++ | Массачусетский технологический институт [16] | как минимум Windows, Linux, MacOS | Компилятор |
Меньше WebCompiler | Веб-компилятор | Массачусетский технологический институт [17] | как минимум Windows, Linux, MacOS | Компилятор, Подсветка синтаксиса, Минификатор |
Смотрите также
- Sass (язык таблиц стилей)
- Стилус (язык таблиц стилей)
Рекомендации
- ^ Команда Core Less. «less.js / CHANGELOG.md на master · less / less.js» . GitHub . Проверено 19 марта 2021 .
- ^ а б в г Команда Core Less. «Начало работы | Less.js» . Less.js . Проверено 19 марта 2021 .
- ^ а б Вайценбаум, Натан (17.06.2009). «Sass and Less: Nex3» . Архивировано из оригинала на 2009-06-21 . Проверено 19 марта 2021 .
- ^ Мэн, Джью (14 декабря 2010 г.). Мортенсен, Питер (ред.). "css - есть ли SASS.js? Что-то вроде LESS.js?" . Переполнение стека . Проверено 19 марта 2021 .
- ^ Этвуд, Джефф (30 апреля 2010 г.). «Что не так с CSS» . Кодирование ужасов . Проверено 19 марта 2021 .
- ^ Команда Core Less. "О программе | Less.js" . Less.js . Проверено 19 марта 2021 .
- ^ Эппштейн, Крис (10 ноября 2010 г.). "sass_and_less_compared.markdown" . GitHub Gist . Проверено 19 марта 2021 .
- ^ Лагендейк, Марк (29 января 2013 г.). «Информация о лицензии · Проблема № 55 · marklagendijk / WinLess» . GitHub . Проверено 19 марта 2021 .
- ^ Дин, Мэтью (2011-12-02). "Crunch / LICENSE.txt в master · matthew-dean / Crunch" . GitHub . Проверено 19 марта 2021 .
- ^ Умный, Дункан (25.07.2013). "less.js-windows / ЛИЦЕНЗИЯ на master · duncansmart / less.js-windows" . GitHub . Проверено 19 марта 2021 .
- ^ Энгель, Кристиан (2012-07-29). "SimpLESS / LICENSE.txt на master · Paratron / SimpLESS" . GitHub . Проверено 19 марта 2021 .
- ^ Эван Нэгл. «Надстройка Chirpy - VS для обработки файлов Js, Css, DotLess и T4 - Архив CodePlex» . CodePlex . Архивировано из оригинала на 2021-02-20 . Проверено 19 марта 2021 .
- ^ Винсент Симоне. «Плагин Eclipse для LESS» . normalesup.org . Проверено 19 марта 2021 .
- ^ Келлен, Тайлер (04.09.2012). "grunt-contrib-less / LICENSE-MIT at master · gruntjs / grunt-contrib-less" . GitHub . Проверено 19 марта 2021 .
- ^ Кристенсен, Мэдс (18.06.2014). «WebEssentials2013 / LICENSE.txt на master · madskristensen / WebEssentials2013» . GitHub . Проверено 19 марта 2021 .
- ^ Брэм ван дер Кроф (2017-07-11). «clessc / ЛИЦЕНЗИЯ на мастера · BramvdKroef / clessc» . GitHub . Проверено 19 марта 2021 .
- ^ SamBrishes (15.12.2018). "snout.less / LICENSE.md на master · pytesNET / snout.less" . GitHub . Проверено 19 марта 2021 .
Внешние ссылки
- Официальный веб-сайт
- Меньше репозитория исходного кода (Git)
- Библиотека миксинов LESS Hat
- Сообщите о расширении миксинов и структуре разработки CSS для LESS & SASS / SCSS (Git)
- МЕНЬШЕ детской площадки