пошук, категорії та ін. показати ▼

less як спроба оптимізувати css код

less як спроба оптимізувати css код
автор опубліковано

Для того щоб зверстати якісну сторінку, в деяких випадках необхідно написати значну частину коду, особливо, якщо дизайн включає всі сучасні елементи: градієнти, заокруглені кути у рамок та інше.

Раніше для того щоб зробити якісну заокруглену кнопку з градієнтом необхідно було кадрувати її на складові частини, а потім за допомогою встановлення як фону вже показувати її у верстці. Але зараз з допомогою CSS3 та HTML5 верстання, як процес, вийшло на новий рівень. Але й це не кінець, адже коду все одно багато, і хотілось б якось оптимізувати процес його написання. Наприклад, є базові кольори, і вони використовуються в більше сотні властивостях, і якщо в один прекрасний момент необхідно замінити їх на інші, то тут і починаються танці з бубном. А якби колір занести десь у змінну, і за необхідності змінити значення лиш цієї змінної, і вся верстака оновилась, було б певно краще. В такому випадку на допомогу приходить такий цікавий інструмент як Less.

Less розширює CSS динамічними можливостями, такими як змінні, операції та функції. Less може використовуватися як на стороні клієнта (IE 6 +, Webkit, Firefox), так і на стороні сервера, з Node.js і Rhino.

Серед можливостей можна виділити наступні.

Змінні

Змінні дозволяють визначити постійно використовувані значення в одному місці, а потім повторно використовувати їх в будь-якому місці таблиці стилів, що полегшує внесення глобальних змін буквально до зміни одного рядка коду.

Mixins

Дозволяють включати всі властивості класу в інший клас шляхом простого включення імені класу як значення одного з властивостей. Це нагадує використання змінних, але щодо цілих класів. Міксіни можуть вести себе як функції, і приймати аргументи, як показано в нижченаведеному прикладі.

Вкладені правила

Замість створення довгих імен селекторів для вказівки успадкування, в Less ми можемо просто вкладати селектори в інші селектори. Це робить спадкування прозоріше для розуміння, а таблиці стилів - коротше.

Функції та операції

Чи зустрічаються у ваших таблицях стилів елементи, пропорційні іншим елементам? Операції дозволяють збільшувати, зменшувати, ділити і множити і значення та кольору властивостей, даючи можливість вказувати складні співвідношення між властивостями. Функції використовуються точнісінько як в JavaScript-коді, дозволяючи маніпулювати значеннями так, як Вам завгодно.

Ось сайт цього інструметну http://lesscss.org/, де ви зможете завантажити і спробувати його на своїх верстках

схоже за тегами

Залишити коментар:

Яндекс цитирования UA TOP Bloggers