Less (мова стилів)
Less | |
---|---|
![]() | |
Дата появи | 2009 |
Творці | Алексіс Селлієр |
Розробник | Алексіс Селлієр, Дмитро Фадєєв |
Останній реліз | 2.7.2[1] (4 січня 2017; 7 років тому (2017-01-04)) |
Система типізації | Динамічна |
Під впливом від | каскадні таблиці стилів і 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(англ.)
- п
- о
- р
- JSSS
- FOSI
- Qt
- Sass
- Less
- Stylus
- SMIL Timesheets
- SMIL