French
DeutschLess (мова стилів) — Вікіпедія
| Less | |
|---|---|
 | |
| Дата появи | 2009 |
| Творці | Алексіс Селлієр |
| Розробник | Алексіс Селлієр, Дмитро Фадєєв |
| Останній реліз | 2.7.2[1] (4 січня 2017) |
| Система типізації | Динамічна |
| Під впливом від | каскадні таблиці стилів і Sass |
| Мова реалізації | JavaScript |
| Операційна система | Крос-платформова |
| Ліцензія | Apache License 2 |
| Звичайні розширення файлів | .less |
| Репозиторій вихідного коду | github.com/less/less.js |
| Вебсайт | lesscss.org |
Less (іноді стилізується як LESS) — це динамічна мова стилів, яка інтерпретується в каскадні таблиці стилів (CSS). Спроектована Алексісом Селлієром. Створена під впливом мови стилів Sass, і в свою чергу вплинула на новий синтаксис Sass «SCSS», в якій також використаний синтаксис, який є розширенням CSS.[2]
Less — це продукт з відкритим сирцевим кодом. Його перша версія була написана на Ruby, однак у наступних версіях було вирішено відмовитися від використання цієї мови програмування на користь JavaScript. Less це вкладена метамова: валідний CSS буде валідною less-програмою з аналогічною семантикою.
Less забезпечує такі розширення CSS: змінні, вкладені правила, міксини, оператори та функції.[3]
Less може працювати на боці клієнта (Internet Explorer 6+, WebKit, Firefox) або на сервері під керуванням Node.js або Rhino.[3]
Less дозволяє визначати змінні. Змінні починаються зі знака (@). Присвоєння значень змінних здійснюється за допомогою двокрапки (:).
Less підтримує чотири типи даних:
- число
- рядок (з лапками чи без)
- логічний (булевий) тип
- колір (ім'я або імена)
Змінна може бути аргументом чи результатом однієї чи кількох функцій. Під час трансляції значення змінних вставляються у вихідний (тобто результуючий) документ CSS.[3]
@pale-green-color: #4D926F; #header { color: @pale-green-color; } h2 { color: @pale-green-color; } Наведений вище Less код буде скомпільовано в CSS код:
#header { color: #4D926F; } h2 { color: #4D926F; } Одна з ключових особливостей 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; } #header p a:hover { border-width: 1px; color: #fff; } Для уникнення постійних повторень однакових правил CSS, в Less введені домішки. Домішки (міксини) дозволяють вбудовувати всі властивості класу в інший клас за рахунок включення імені класу як одної зі своїх властивостей, таким чином, вони ведуть себе як свого роду константи або змінні. Вони також можуть вести себе як функції, і приймати аргументи. [3]
.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 має спеціальний тип набору правил — параметричні домішки(міксини), що можуть бути змішані подібно до класів, але приймають параметри.
Less дозволяє виконувати операції та функції. До дозволених операцій входять додавання, віднімання, ділення і множення значень властивостей і кольору, які можуть бути використані для створення складних взаємозв'язків між властивостями.
@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: #333333; border-left: 1px; border-right: 3px; } #footer { color: #114411; border-color: #7d2717; } - ↑ CHANGELOG. GitHub. Архів оригіналу за 25 березня 2017. Процитовано 22 січня 2017.
- ↑ Sass and Less. Архів оригіналу за 21 червня 2009. Процитовано 22 січня 2013.
- ↑ а б в г Офіційний сайт LESS. Архів оригіналу за 19 січня 2022. Процитовано 22 січня 2013.
- Офіційний сайт Less [Архівовано 19 січня 2022 у Wayback Machine.]
- Репозиторій вихідного коду (Git) [Архівовано 12 травня 2011 у Wayback Machine.]
- Порівняння коду з Sass/SCSS та LESS(англ.)
- A Survey on CSS Preprocessors. Ricardo Queirós [Архівовано 21 березня 2018 у Wayback Machine.], 2017(англ.)