Меньше (язык таблицы стилей)
 | |
| Разработано | Алексис Селье |
|---|---|
| Разработчик | Alexis Sellier, Dmitry Fadeyev |
| Впервые появился | 2009 год |
| Стабильная версия | 4.2.0 [1] 
/ 7 сентября 2023 г |
| Дисциплина набора текста | Динамический |
| Язык реализации | JavaScript |
| ТЫ | Кросс-платформенный |
| Лицензия | Лицензия Апач 2.0 |
| Расширения имен файлов | .меньше |
| Веб-сайт | Меньше CSS |
| Под влиянием | |
| CSS , Сасс | |
| Под влиянием | |
| Sass , Less Framework, Bootstrap (v3) | |
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-green-color: #4D926F;
#header {
color: @pale-green-color;
}
h2 {
color: @pale-green-color;
}
Код выше в Less будет скомпилирован в следующий код CSS.
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
Миксины
[ редактировать ]Миксины позволяют встраивать все свойства одного класса в другой класс, включая имя класса в качестве одного из его свойств, таким образом ведя себя как своего рода константа или переменная. Они также могут вести себя как функции и принимать аргументы. CSS не поддерживает миксины: любой повторяющийся код должен повторяться в каждом месте. Миксины позволяют более эффективно и четко повторять код, а также упростить его изменение. [2]
.rounded-corners (@radius: 5px 10px 8px 2px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px 25px 35px 0px);
}
Приведенный выше код в Less будет скомпилирован в следующий код CSS:
#header {
-webkit-border-radius: 5px 10px 8px 2px;
-moz-border-radius: 5px 10px 8px 2px;
border-radius: 5px 10px 8px 2px;
}
#footer {
-webkit-border-radius: 10px 25px 35px 0px;
-moz-border-radius: 10px 25px 35px 0px;
border-radius: 10px 25px 35px 0px;
}
В Less есть специальный тип набора правил, называемый параметрическими миксинами, который можно смешивать с одинаковыми классами, но он принимает параметры.
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 16px;
a {
text-decoration: none;
color: red;
&:hover {
border-width: 1px;
color: #fff;
}
}
}
}
Приведенный выше код в Less будет скомпилирован в следующий код CSS:
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 16px;
}
#header p a {
text-decoration: none;
color: red;
}
#header p a:hover {
border-width: 1px;
color: #fff;
}
Функции и операции
[ редактировать ]Меньше позволяет выполнять операции и функции. Операции позволяют складывать, вычитать, делить и умножать значения и цвета свойств, что можно использовать для создания сложных связей между свойствами. Функции взаимно однозначно сопоставляются с кодом JavaScript, позволяя манипулировать значениями.
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 3;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
Приведенный выше код в Less будет скомпилирован в следующий код CSS:
#header {
color: #333;
border-left: 1px;
border-right: 3px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
Сравнение
[ редактировать ]Сасс
[ редактировать ]И 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 и загрузить его на сайт. При использовании этой опции файлы .less не загружаются, и сайту не требуется конвертер JavaScript less.js.
Меньше программного обеспечения
[ редактировать ]| Имя | Описание | Лицензия на программное обеспечение | Платформа | Функциональность |
|---|---|---|---|---|
| WinLess — графический интерфейс Windows для less.js | Компилятор без графического интерфейса | Апач 2.0 [8] | Окна | Компилятор |
| хруст | Меньше редактора и компилятора (требуется Adobe AIR) | лицензия GPL [9] | Windows, Mac OS X | Компилятор Редактор |
| less.js-windows | Простая утилита командной строки для Windows, которая компилирует файлы *.less в CSS с помощью less.js. | МОЯ лицензия [10] | Окна | Компилятор |
| less.app | Меньше компилятора | Собственный | Мак ОС Х | Компилятор |
| КодКит | Меньше компилятора | Собственный | Мак ОС Х | Компилятор |
| LessEngine | Меньше компилятора | Бесплатно | Плагин OpenCart | Компилятор |
| ПРОСТОЙ БЕЗ ПРОСТО | Меньше компилятора | бесплатно, но без явной лицензии [11] | Окна Мак ОС Х Линукс |
Компилятор |
| веселый | Меньше компилятора | Мс-ПЛ [12] | Плагин Visual Studio | Компилятор |
| Веб-инструмент Mindscape | Подсветка синтаксиса и IntelliSense для Less и Sass | Собственный | Плагин Visual Studio | Компилятор Подсветка синтаксиса |
| Плагин Eclipse за меньшие деньги | Плагин Eclipse | АПЛ 1.0 [13] | Плагин Eclipse | Подсветка синтаксиса Помощник по контенту Компилятор |
| mod_less | Модуль Apache2 для компиляции Less на лету | Открытый исходный код | Линукс | Компилятор |
| ворчание-вклад-меньше | Задача Node.js Grunt для преобразования Less в CSS | С [14] | Node.js | Компилятор |
| Основы Интернета | Расширение Visual Studio с поддержкой Less и Sass. | Апач 2.0 [15] | Окна | Подсветка синтаксиса, Помощник по содержимому, Компилятор |
| классный | Компилятор чистого C++ | С [16] | хотя бы Windows, Linux, MacOS | Компилятор |
| Меньше веб-компилятора | Веб-компилятор | С [17] | хотя бы Windows, Linux, MacOS | Компилятор, подсветка синтаксиса, минификатор |
См. также
[ редактировать ]Ссылки
[ редактировать ]- ^ «Выпуск 4.2.0» . 7 сентября 2023 г. Проверено 18 сентября 2023 г.
- ^ Jump up to: а б с д Команда Core Less. «Начало работы | Less.js» . Меньше.js . Проверено 19 марта 2021 г.
- ^ Jump up to: а б Вайценбаум, Натан (17 июня 2009 г.). «Sass и меньше: Nex3» . Архивировано из оригинала 21 июня 2009 г. Проверено 19 марта 2021 г.
- ^ Мэн, Джиев (14 декабря 2010 г.). Мортенсен, Питер (ред.). "css - Есть ли SASS.js? Что-то вроде LESS.js?" . Переполнение стека . Проверено 19 марта 2021 г.
- ^ Этвуд, Джефф (30 апреля 2010 г.). «Что не так с CSS» . Кодирующий ужас . Проверено 3 декабря 2022 г.
- ^ Команда Core Less. «О программе | Less.js» . Меньше.js . Проверено 19 марта 2021 г.
- ^ Эппштейн, Крис (10 ноября 2010 г.). "sass_and_less_compared.markdown" . GitHub суть . Проверено 19 марта 2021 г.
- ^ Лагендейк, Марк (29 января 2013 г.). «Информация о лицензии · Выпуск № 55 · marklagendijk/WinLess» . Гитхаб . Проверено 19 марта 2021 г.
- ^ Дин, Мэтью (2 декабря 2011 г.). «Crunch/LICENSE.txt в мастере · matthew-dean/Crunch» . Гитхаб . Проверено 19 марта 2021 г.
- ^ Смарт, Дункан (25 июля 2013 г.). «less.js-windows/LICENSE at master · duncansmart/less.js-windows» . Гитхаб . Проверено 19 марта 2021 г.
- ^ Энгель, Кристиан (29 июля 2012 г.). «SimpLESS/LICENSE.txt в мастере · Paratron/SimpLESS» . Гитхаб . Проверено 19 марта 2021 г.
- ^ Эван Нэгл. «Chirpy — надстройка VS для обработки файлов Js, Css, DotLess и T4 — архив CodePlex» . КодПлекс . Архивировано из оригинала 20 февраля 2021 г. Проверено 19 марта 2021 г.
- ^ Винсент Симоне. «Плагин Eclipse для LESS» . Normalesup.org . Проверено 19 марта 2021 г.
- ^ Келлен, Тайлер (4 сентября 2012 г.). «grunt-contrib-less/LICENSE-MIT at master · gruntjs/grunt-contrib-less» . Гитхаб . Проверено 19 марта 2021 г.
- ^ Кристенсен, Мэдс (18 июня 2014 г.). «WebEssentials2013/LICENSE.txt для освоения · madskristensen/WebEssentials2013» . Гитхаб . Проверено 19 марта 2021 г.
- ^ Брэм ван дер Кроеф (11 июля 2017 г.). "clesc/LICENSE at master · BramvdKroef/clesc" . Гитхаб . Проверено 19 марта 2021 г.
- ^ СэмБришес (15 декабря 2018 г.). "snout.less/LICENSE.md в мастере · pytesNET/snout.less" . Гитхаб . Проверено 19 марта 2021 г.