Less (іноді стилізується як LESS) — це динамічна мова стилів, яка інтерпретується в каскадні таблиці стилів (CSS). Спроектована Алексісом Селлієром. Створена під впливом мови стилів Sass, і в свою чергу вплинула на новий синтаксис Sass «SCSS», в якій також використаний синтаксис, який є розширенням CSS.
Less — це продукт з відкритим сирцевим кодом. Його перша версія була написана на Ruby, однак у наступних версіях було вирішено відмовитися від використання цієї мови програмування на користь JavaScript. Less це вкладена метамова: валідний CSS буде валідною less-програмою з аналогічною семантикою.
Less забезпечує такі розширення CSS: змінні, вкладені правила, міксини, оператори та функції.
Less може працювати на боці клієнта (Internet Explorer 6+, WebKit, Firefox) або на сервері під керуванням Node.js або Rhino.
Змінні Less дозволяє визначати змінні. Змінні починаються зі знака (@). Присвоєння значень змінних здійснюється за допомогою двокрапки (:).
Less підтримує чотири типи даних: число рядок (з лапками чи без) логічний (булевий) тип колір (ім'я або імена)
Змінна може бути аргументом чи результатом однієї чи кількох функцій. Під час трансляції значення змінних вставляються у вихідний (тобто результуючий) документ CSS.
@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 введені домішки. Домішки (міксини) дозволяють вбудовувати всі властивості класу в інший клас за рахунок включення імені класу як одної зі своїх властивостей, таким чином, вони ведуть себе як свого роду константи або змінні. Вони також можуть вести себе як функції, і приймати аргументи.
.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; }
Примітки
Посилання Офіційний сайт Less Репозиторій вихідного коду (Git) Порівняння коду з Sass/SCSS та LESS A Survey on CSS Preprocessors. Ricardo Queirós , 2017