Вивчаємо LESS: Застосування на практиці

2

Від автора: сьогодні ми завершуємо серію публікацій «Вивчаємо LESS», ми поговоримо про застосування LESS у веб-розробці. Сьогоднішній пост трохи відрізняється від попередніх тим, що ми не будемо демонструвати нові техніки та приклади коду, а розглянемо, як використовувати LESS, обговоримо проекти, за допомогою яких ви можете почати розробку з використанням LESS і багато іншого.

План статей серії:

Вступ

Використання Змінних

Використання Миксинов

Використання Вкладених правил

Використання Функцій

Розділяй і володарюй

Застосування на практиці

Написання коду LESS

Якщо ви читали наш Введення, то знаєте, що я рекомендую компілювати всі файли LESS локально, просто використовуючи одну таблицю стилів CSS. Найпопулярніші програми, які використовуються для цього, — це LESS.app і CodeKit, обидві створив Incident57.

LESS.APP

Вивчаємо LESS: Застосування на практиці

LESS.app – це безкоштовна програма, яка знаходить всі файли LESS веб-папки і збирає їх в CSS. Ви можете задати конкретні папки виводу і вибрати, які саме LESS-файли ви хочете скомпілювати (це стане в нагоді, якщо ви розділили LESS на менші модульні файли і імпортували їх в одну таблицю стилів). Крім цього, можна мінімізувати CSS з цього додатка, зберігаючи початковий розмір файлу (але навіть не думайте редагувати CSS файл).

CODEKIT

Вивчаємо LESS: Застосування на практиці

CodeKit – це нове покоління додатки LESS.app, який коштує $20 (щоб допомогти творцеві виплатити кредит на навчання, так що, насправді, не так вже й погано). CodeKit компілює LESS ідеально, але це ще не все. Він також збирає файли Sass, Stylus, Haml, Coffeescript, JavaScript і Compass. Нехай я трохи знаю про цих інших типах файлів (не рахуючи JavaScript), але… CodeKit може зібрати їх усі! Мало того, у CodeKit є ще одна перевага – коли користувач зберігає код, браузер автоматично оновлюється і відображає зміни, і все це супроводжується прикольною CSS3 анімацією.

Проекти LESS

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

Від TWITTER BOOTSTRAP

Вивчаємо LESS: Застосування на практиці

Bootstrap від Twitter – це на даний момент один з найпопулярніших проектів з відкритим кодом, він розроблений Марком Отто і Джейкобом з Twitter. Bootstrap – це набір HTML, CSS і JavaScript компонентів для користувача інтерфейсу і взаємодій, включаючи адаптивний дизайн і такі компоненти як кнопки, форми та інше.

Bootstrap використовує LESS як основу для всіх стилів і поділяє їх код на менші модульні файли, легко читаються і зручні в супроводі.

Адаптивна тема WORDPRESS BONES

Вивчаємо LESS: Застосування на практиці

Якщо ви хочете займатися веб-дизайном і розробкою для WordPress, я б запропонував почати з теми Bones. Існує багато шаблонів WordPress для початківців, але я думаю, навряд чи знайдеться щось краще, ніж Bones від Едді Мачадо.

Адаптивна версія Bones використовує LESS, щоб структурувати сайт WordPress за допомогою медіа-запитів CSS3 і визначити, який файл LESS потрібно завантажувати компілятор. Система досить зручна, і якщо ви збираєтеся працювати з WordPress, то вона безумовно варта уваги.

Проект 320 AND UP

Вивчаємо LESS: Застосування на практиці

320 and Up – це адаптивний шаблон в стилі «малі екрани – насамперед». Цей проект є ідеальної відправною точкою для тих, хто хоче створювати адаптивні веб-сайти, не інтегруючи їх з CMS. Якщо ви збираєтеся імпортувати веб-сайт на іншу CMS, наприклад, в ExpressionEngine, 320 and Up – це як раз для вас. Цей проект використовує LESS для того, щоб створити адаптивний фреймворк для стилізації починаючи з малих екранів і закінчуючи великими — на відміну від концепції «веб-дизайн для стаціонарного комп’ютера в першу чергу, а для екранів менше в наступну чергу». Проект дуже цікавий і безумовно заслуговує уваги!

Висновок

Цією публікацією ми завершуємо серію статей «Вивчаємо LESS». Спасибі за вашу увагу, коментарі та обговорення. Ви знаєте інші проекти, які використовують LESS? Напишіть про них у коментарях нижче.