Ефективна робота з МЕНШИМИ Поради та інструменти

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

Ну, якщо ви готові, давайте почнемо.

Відмова від відповідальності: Наведені нижче поради наведені з мого повсякденного досвіду як веб-дизайнер. Таким чином, перш ніж ми підемо далі, я хочу наголосити, що поради можуть підійти до дизайнерів, а не до інших; як і будь-який інший відгук, який ви знайдете в Інтернеті. Тим не менш, я сподіваюся, що ви зможете пожинати щось корисне з наступних порад.

1. Код Highlighter

Як ми вже згадували раніше, ми познайомили вас з ChrunchApp. Однак, це додаток може не бути перевагою кожного веб-дизайнера; тому що кожен дизайнер має своє власне робоче середовище, включаючи редактор коду на свій вибір.

Замість того, щоб інсталювати інший редактор коду, ви дійсно можете використовувати свій поточний і включити підсвічування синтаксису. Отже, на цій посаді я поділюся деякими порадами щодо додавання LESS-коду до двох відомих текстових редакторів: Високий текст 2 і Блокнот++.

Високий текст 2

Цей редактор в даний час є моїм кращим вибором, щоб допомогти мені складати коди. Ця програма доступна для Windows, Linux і OSX, так що незалежно від операційної системи, ви все одно зможете слідувати цьому підказкам.

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

Примітка: Переконайтеся, що ви прочитали ліцензію перед завантаженням, оскільки безкоштовна версія призначена лише для оцінки.

Встановіть консоль пакетів

Спочатку відкрийте Sublime Text 2 і відкрийте консоль з цього меню Перегляд> Показати консоль

Потім скопіюйте та вставте наступний командний рядок у консоль, після чого натисніть Enter, щоб встановити елемент керування пакунка з wBond.net:

import urllib2, os; pf = "Пакет Control.sublime-пакет"; ipp = sublime.installed_packages_path (); os.makedirs (ipp) якщо не os.path.exists (ipp), то жоден; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); open (os.path.join (ipp, pf), 'wb') .write (urllib2.urlopen ('http://sublime.wbond.net/'+pf.replace (","% 20 ")). read ()); print 'Будь ласка, перезапустіть Sublime Text для завершення інсталяції'

Це Пакетна консоль допоможе нам встановити пакунок розширення.

Встановлення пакета підсвічування LESS

Перезапустіть Sublime Text 2 і в цьому меню покажіть Palette Command Інструменти> Палітра команд. Зачекайте, доки список завантажень не буде завантажено. Потім введіть Встановити пакет для пошуку і завантаження сховищ пакунків.

Потім знайдіть пакет LESS з списку сховищ і натисніть Enter.

Зачекайте хвилину для завантаження та встановлення пакунка Sublime Text 2, доки у рядку стану не з'явиться наступне повідомлення.

Перейдіть до меню Перегляд> Синтаксис, Ви повинні побачити МЕНШЕ у списку. Це означає, що Високий Текст 2 підтримує .менше і ваш синтаксис LESS тепер повинен мати правильне виділення кольору.

Блокнот++

Notepad ++ є безкоштовним редактором з відкритим вихідним кодом і має багато корисних плагінів для розширення його функціональності. Він також широко використовується багатьма веб-дизайнерами / розробниками, особливо тим, хто працює з операційною системою Windows. Отже, я вирішив також включити підказку, щоб додати текст для МЕНЕ.

Встановіть LESS-виділити в Notepad++

Увімкнення кольору LESS у Notepad ++ досить легко.

Спочатку завантажте пакет LESS для Notepad ++ з цього посилання (userDefineLang_LESS.xml). Потім перейдіть до Перегляд> Діалог користувача.

З'явиться наступне спливаюче вікно. Натисніть кнопку Імпортувати ... і знайдіть завантажений файл .xml файл. Потім перезапустіть Блокнот++.

Відкрийте файл .less і перейдіть до меню Мова. Тепер ви повинні побачити LESS включені. Виберіть його, щоб застосувати виділення кольорів на синтаксисі LESS.

Більше ресурсів

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

Adobe DreamWeaver

Безсумнівно, Dreamweaver має величезну базу користувачів. Він доступний як для Mac, так і для Windows. Таким чином, якщо ви використовуєте цей редактор, ось один з хороших джерел для установки LESS виділення в Adobe DreamWeaver.

Кода

Якщо ви використовуєте Mac, ви, напевно, знаєте Coda, цей редактор є одним з найбільш популярних серед користувачів Mac. І ось, як ви можете встановити LESS в Coda.

Geany

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

2. Менше компілятора

На відміну від ChrunchApp, який має вбудований компілятор LESS, інші редактори не матимуть його за замовчуванням. Хоча є кілька способів включити його, але це скоріше технічне для загальних користувачів. Таким чином, найкращим рішенням, яке я маю, є виконання компіляції за допомогою таких інструментів: Безпечний або LESS.app. WinLESS - це компілятор, призначений для Windows, а LESS.app побудований для OSX.

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

По-перше, я хотів би завантажити WinLESS і встановити його.

Натисніть кнопку Додати папку та знайдіть каталог, в якому ви розмістите .менше файлів (я припускаю, що ви вже створили хоча б один). Після додавання одного; WinLESS сканує і знайде все .менше файли і показувати вам у списку.

Перейдіть до меню Файл> Налаштування, і переконайтеся, що ці опції перевірені;

• Автоматично компілювати файли під час збереження
• Показати повідомлення про успішну компіляцію

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

Відкрий свій .менше файл з доданого каталогу, зробіть кілька змін і Збережіть його.

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

Якщо ви використовуєте Mac, ви можете використовувати LESS.app, що має таку ж функціональність, як WinLESS.

Попередньо встановлені змішування

У сучасних сучасних методах веб-дизайну ми будемо використовувати властивості CSS3, наприклад Gradient, Shadow або Border Radius, які виглядають так:

-webkit-border-radius: 3px; -moz-border-radius: 3px; радіус кордону: 3px;

або

background: -moz-linear-gradient (зверху, # f0f9ff 0%, # a1dbff 100%); background: -webkit-лінійний градієнт (top, # f0f9ff 0%, # a1dbff 100%); фон: -о-лінійний градієнт (зверху, # f0f9ff 0%, # a1dbff 100%); background: -ms-linear-gradient (зверху, # f0f9ff 0%, # a1dbff 100%); фон: лінійний градієнт (зверху, # f0f9ff 0%, # a1dbff 100%);

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

І, одним з моїх улюблених є Less Elements, що містить багато корисних правил CSS3. Таким чином, ми тепер запишемо менше рядків коду з нудних префіксів постачальників.

Гаразд, тепер, давайте подивимося, як всі ці поради вище можуть дійсно допомогти.

Покласти їх разом

У цьому прикладі я збираюся створити просту кнопку посилання. Спочатку я хотів би створити новий документ HTML і поставити наступну розмітку:

     Натисніть Мене 

Створити styles.less як основну таблицю стилів LESS, збережіть її в тій же папці з нашим документом HTML і додайте папку до WinLESS.

Імпортувати elements.less ми завантажили перед використанням цього синтаксису:

@import "elements.less";

Тепер ми можемо використовувати будь-які Mixins, надані з elements.less .градієнт, .округлі, і .межує. Я впевнений, що ім'я Mixins є очевидним.

Далі, вкажіть нижче правила LESS у вашій таблиці стилів. І збережіть його ще раз

 a display: inline-block; заповнення: 10px 20px; колір: # 555; текст-прикраса: немає; .bw-градієнт (#eee, 240, 255); . . &: hover .bw-градієнт (#eee, 255, 240);  

З нашим .менше Файл був доданий до WinLESS, він автоматично компілюється .css. Тепер давайте побачимо результати.

Ну, це не так уже й погано, якщо врахувати, що ця кнопка була створена з меншою кількістю ліній, ніж потрібна. Ось фактично створений статичний CSS:

 a display: inline-block; заповнення: 10px 20px; колір: # 555; текст-прикраса: немає; фон: #eeeeee; background: -webkit-gradient (лінійний, лівий нижній, лівий верхній, колір-стоп (0, # f0f0f0), колір-стоп (1, #ffffff)); background: -ms-linear-gradient (знизу, # f0f0f0 0%, # f0f0f0 100%); background: -moz-linear-gradient (нижній центр, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; кордон-радіус: 2px; -moz-background-clip: прокладка; -webkit-background-clip: прокладок; фон-кліп: прокладка-коробка; border-top: твердий 1px #eeeeee; border-left: твердий 1px #eeeeee; прикордонний праворуч: твердий 1px #eeeeee; кордон нижній: твердий 1px #eeeeee;  a: hover background: #eeeeee; background: -webkit-gradient (лінійний, лівий нижній, лівий верхній, колір-стоп (0, #ffffff), колір-стоп (1, # f0f0f0)); background: -ms-лінійний градієнт (знизу, #ffffff 0%, #ffffff 100%); background: -moz-linear-gradient (нижній центр, #ffffff 0%, # f0f0f0 100%); 

У резюме

Ось короткий опис того, що ми обговорювали в цій публікації:

• Увімкнувши підсвічування синтаксису в нашому поточному редакторі, нам не потрібно встановлювати додатковий редактор лише для створення синтаксису LESS; це може заощадити простір / пам'ять на диску.
• Також нам більше не потрібно завантажувати та зв'язувати бібліотеку LESS.js з нашою головою HTML, як це було зроблено в нашому останньому підручнику. Таким чином, наш HTML документ залишається чистим і акуратним.
• Використання інструментів компілятора, таких як WinLESS і LESS.app, може генерувати статичний вихід CSS миттєво. Отже, якщо щось не так з синтаксисом, ми можемо його оглянути одразу.
• Preset Mixins як LESS Elements - наш найкращий друг. Це дійсно може заощадити наш час при компіляції стомного CSS3 властивості.

.