Від автора: сьогодні ми завершуємо серію публікацій «Вивчаємо LESS», ми поговоримо про застосування LESS у веб-розробці. Сьогоднішній пост трохи відрізняється від попередніх тим, що ми не будемо демонструвати нові техніки та приклади коду, а розглянемо, як використовувати LESS, обговоримо проекти, за допомогою яких ви можете почати розробку з використанням LESS і багато іншого.
План статей серії:
Вступ
Використання Змінних
Використання Миксинов
Використання Вкладених правил
Використання Функцій
Розділяй і володарюй
Застосування на практиці
Написання коду LESS
Якщо ви читали наш Введення, то знаєте, що я рекомендую компілювати всі файли LESS локально, просто використовуючи одну таблицю стилів CSS. Найпопулярніші програми, які використовуються для цього, — це LESS.app і CodeKit, обидві створив Incident57.
LESS.APP
LESS.app – це безкоштовна програма, яка знаходить всі файли LESS веб-папки і збирає їх в CSS. Ви можете задати конкретні папки виводу і вибрати, які саме LESS-файли ви хочете скомпілювати (це стане в нагоді, якщо ви розділили LESS на менші модульні файли і імпортували їх в одну таблицю стилів). Крім цього, можна мінімізувати CSS з цього додатка, зберігаючи початковий розмір файлу (але навіть не думайте редагувати CSS файл).
CODEKIT
CodeKit – це нове покоління додатки LESS.app, який коштує $20 (щоб допомогти творцеві виплатити кредит на навчання, так що, насправді, не так вже й погано). CodeKit компілює LESS ідеально, але це ще не все. Він також збирає файли Sass, Stylus, Haml, Coffeescript, JavaScript і Compass. Нехай я трохи знаю про цих інших типах файлів (не рахуючи JavaScript), але… CodeKit може зібрати їх усі! Мало того, у CodeKit є ще одна перевага – коли користувач зберігає код, браузер автоматично оновлюється і відображає зміни, і все це супроводжується прикольною CSS3 анімацією.
Проекти LESS
Якщо ви хочете почати використовувати LESS в проектах, я б порадив взятися за проект з відкритим кодом, який вже задіює LESS. Це найкращий спосіб вивчити дану технологію і всі її премудрості, які досвідчені веб-розробники використовують у своїх проектах. Я перерахую деякі проекти, що задіють LESS, якими я постійно користуюся.
Від TWITTER BOOTSTRAP
Bootstrap від Twitter – це на даний момент один з найпопулярніших проектів з відкритим кодом, він розроблений Марком Отто і Джейкобом з Twitter. Bootstrap – це набір HTML, CSS і JavaScript компонентів для користувача інтерфейсу і взаємодій, включаючи адаптивний дизайн і такі компоненти як кнопки, форми та інше.
Bootstrap використовує LESS як основу для всіх стилів і поділяє їх код на менші модульні файли, легко читаються і зручні в супроводі.
Адаптивна тема WORDPRESS BONES
Якщо ви хочете займатися веб-дизайном і розробкою для WordPress, я б запропонував почати з теми Bones. Існує багато шаблонів WordPress для початківців, але я думаю, навряд чи знайдеться щось краще, ніж Bones від Едді Мачадо.
Адаптивна версія Bones використовує LESS, щоб структурувати сайт WordPress за допомогою медіа-запитів CSS3 і визначити, який файл LESS потрібно завантажувати компілятор. Система досить зручна, і якщо ви збираєтеся працювати з WordPress, то вона безумовно варта уваги.
Проект 320 AND UP
320 and Up – це адаптивний шаблон в стилі «малі екрани – насамперед». Цей проект є ідеальної відправною точкою для тих, хто хоче створювати адаптивні веб-сайти, не інтегруючи їх з CMS. Якщо ви збираєтеся імпортувати веб-сайт на іншу CMS, наприклад, в ExpressionEngine, 320 and Up – це як раз для вас. Цей проект використовує LESS для того, щоб створити адаптивний фреймворк для стилізації починаючи з малих екранів і закінчуючи великими — на відміну від концепції «веб-дизайн для стаціонарного комп’ютера в першу чергу, а для екранів менше в наступну чергу». Проект дуже цікавий і безумовно заслуговує уваги!
Висновок
Цією публікацією ми завершуємо серію статей «Вивчаємо LESS». Спасибі за вашу увагу, коментарі та обговорення. Ви знаєте інші проекти, які використовують LESS? Напишіть про них у коментарях нижче.
