 | |
| Разработано | Алексис Селье |
|---|---|
| Разработчик | Алексис Селье, Дмитрий Фадеев |
| Впервые появился | 2009 |
| Стабильный выпуск | 4.1.1 [1] / 30 января 2021 г . |
| Печатная дисциплина | Динамический |
| Язык реализации | JavaScript |
| Операционные системы | Кроссплатформенность |
| Лицензия | Лицензия Apache 2.0 |
| Расширения имени файла | .меньше |
| Веб-сайт | lesscss |
| Под влиянием | |
| CSS , Sass | |
| Под влиянием | |
| Sass , Less Framework, Bootstrap (v3) | |
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]
Особенности [ править ]
Переменные [ править ]
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 .
- ^ a b c d Команда Core Less. «Начало работы | Less.js» . Less.js . Проверено 19 марта 2021 .
- ^ a b Вайценбаум, Натан (17.06.2009). «Sass and Less: Nex3» . Архивировано из оригинала на 2009-06-21 . Проверено 19 марта 2021 .
- ^ Мэн, Jiew (2010-12-14). Мортенсен, Питер (ред.). "css - есть ли SASS.js? Что-то вроде LESS.js?" . Переполнение стека . Проверено 19 марта 2021 .
- ↑ Этвуд, Джефф (30 апреля 2010 г.). «Что не так с CSS» . Кодирование ужасов . Проверено 19 марта 2021 .
- ^ Команда Core Less. "О программе | Less.js" . Less.js . Проверено 19 марта 2021 .
- ^ Эпштайна, Крис (2010-11-10). "sass_and_less_compared.markdown" . GitHub Gist . Проверено 19 марта 2021 .
- ^ Lagendijk, Марк (2013-01-29). «Информация о лицензии · Проблема № 55 · marklagendijk / WinLess» . GitHub . Проверено 19 марта 2021 .
- ^ Дин, Мэтью (2011-12-02). "Crunch / LICENSE.txt в master · matthew-dean / Crunch" . GitHub . Проверено 19 марта 2021 .
- ^ Смарт, Дункан (2013-07-25). "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 .
- ^ Келлен, Тайлер (2012-09-04). "grunt-contrib-less / LICENSE-MIT at master · gruntjs / grunt-contrib-less" . GitHub . Проверено 19 марта 2021 .
- ^ Кристенсен, Мэдс (2014-06-18). «WebEssentials2013 / LICENSE.txt на master · madskristensen / WebEssentials2013» . GitHub . Проверено 19 марта 2021 .
- ^ Брам ван дер Кроф (2017-07-11). «clessc / ЛИЦЕНЗИЯ на мастера · BramvdKroef / clessc» . GitHub . Проверено 19 марта 2021 .
- ^ SamBrishes (2018-12-15). "snout.less / LICENSE.md на master · pytesNET / snout.less" . GitHub . Проверено 19 марта 2021 .
Внешние ссылки [ править ]
- Официальный веб-сайт
- Меньше репозитория исходного кода (Git)
- Библиотека миксинов LESS Hat
- Сообщите о расширении миксинов и фреймворке создания CSS для LESS & SASS / SCSS (Git)
- МЕНЬШЕ детской площадки
