Ефективна работа с по-малко съвети и инструменти

В предишния ни урок научихме как да използваме LESS на практика, като използваме приложения като ChrunchApp за компилиране на кода. Този път ще прегледаме някои полезни съвети, които ще могат да увеличат производителността и производителността при съставянето на по-малък синтаксис. Ще създадем нашия работен плот / работна среда, като позволим осветяването на синтаксиса за текущия ни редактор, използвайки инструменти за автоматичен компилатор и използвайки предварително зададени миксини, след което ги синхронизираме заедно.

Е, ако сте готови, нека започнем.

Опровержение: Съветите, обяснени по-долу, са извлечени от ежедневните ми опитности като уеб дизайнер. Така че, преди да продължим по-нататък, искам да подчертая, че съветите може да са подходящи за някои дизайнери, а не за други; точно като всеки друг съвет, който намирате в мрежата. Въпреки това се надявам, че можете да извлечете нещо полезно от следните съвети.

1. Код за маркиране

Както споменахме по-рано, запознахме ви с ChrunchApp. Това приложение обаче може да не е предпочитание на всеки уеб дизайнер; защото всеки дизайнер има собствена работна среда, включително редактор на кодове по техен избор.

Вместо да инсталирате друг редактор на кодове, всъщност можете да използвате текущия си и да активирате подсветката в него. Така че, в тази публикация ще споделя някои съвети за добавяне на LESS код за осветяване в два известни текстови редактора: Възвишен текст 2 и Notepad++.

Възвишен текст 2

Този редактор в момента е моят предпочитан избор да ми помогне да съставям кодове. Това приложение е достъпно за Windows, Linux и OSX, така че каквато и да е операционната система, все още ще можете да следвате този съвет.

Сега да я изтеглим от официалния му сайт и да пробваме този редактор. След това прочетете следните инструкции, за да активирате цветовото подчертаване на LESS в него.

Забележка: Моля, уверете се, че сте прочели лиценза, преди да го изтеглите, тъй като безплатната версия е предназначена само за оценка.

Инсталирайте конзолата за пакети

Първо отворете Sublime Text 2 и покажете конзолата от това меню Преглед> Покажи конзолата

След това копирайте и поставете следния команден ред в конзолата, след което натиснете Enter, за да инсталирате контрола на пакета от wBond.net:

import urllib2, os; pf = "Package Control.sublime-package"; IPP = sublime.installed_packages_path (); os.makedirs (ipp), ако не е os.path.exists (ipp) друго Няма; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); отворена (os.path.join (IPP, PF), "WB") .write (urllib2.urlopen ( "http://sublime.wbond.net/'+pf.replace (", "% 20")). print ()); print 'Моля, рестартирайте Sublime Text, за да завършите инсталацията'

Това Конзола за пакети ще ни помогне да инсталираме връзката-пакет.

Инсталиране на пакет за маркиране на LESS

Рестартирайте Sublime Text 2 и покажете Command Palette от това меню Инструменти> Палитра за командите. Изчакайте, докато списъкът с пакети се зареди. След това въведете Инсталиране на пакет за търсене и зареждане на хранилища на пакети.

След това потърсете пакета LESS от списъка на хранилището и натиснете Enter.

Изчакайте една минута, за да може Sublime Text 2 да изтегли и инсталира пакета, докато в лентата на състоянието не се появи следното известие.

Отидете в менюто Изглед> Синтаксис, трябва да видите LESS в списъка. Това означава, че Високият Текст 2 подкрепя .по-малко и вашият по-малък синтаксис също трябва да има подходящо оцветяване сега.

Notepad++

Notepad ++ е безплатен редактор с отворен код и има много полезни приставки за разширяване на функционалността му. Също така широко се използва от много уеб дизайнери / разработчици, особено тези, които работят с операционната система Windows. Така че решавам да включа и върха, за да добавя по-малко текст за него.

Инсталирайте LESS-маркиране в Notepad++

Активирането на LESS color highlight в Notepad ++ е доста лесно.

Първо изтеглете LESS пакет за Notepad ++ от тази връзка (userDefineLang_LESS.xml). След това отидете на Преглед> Дефиниран от потребителя диалог.

Ще се появи следното изскачащо поле по-долу. Кликнете върху Внос ... и намерете изтегления .XML файл. След това рестартирайте тефтера++.

Отворете .less файла и отидете на менюто Language. Вече трябва да виждате LESS включено. Изберете го, за да приложите цветово осветяване на синтаксиса си с МАЛКО.

Повече ресурси

Има много други редактори на пазара. Така че, тук ние включваме някои полезни връзки за вас, ако не използвате някой от горните редактори.

Adobe DreamWeaver

Безспорно Dreamweaver има огромна потребителска база. Той е достъпен както за Mac, така и за Windows. Така че, ако използвате този редактор, тук е един добър източник за инсталиране на LESS маркиране в Adobe DreamWeaver.

кода

Ако използвате Mac, вероятно знаете Coda, този редактор е един от най-популярните сред потребителите на Mac. И ето как можете да инсталирате LESS в Coda.

Geany

Той е един от най-популярните редактори на кодове сред потребителите на Linux. Някои компютри в моя офис, които работят под Linux, също използват Geany. Така че, ако го използвате също, можете да включите LESS подсветката, като следвате тази инструкция в SuperUser.com

2. LESS компилатор

За разлика от 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%); фон: -webkit-линеен градиент (отгоре, # f0f9ff 0%, # a1dbff 100%); фон: -о-линеен градиент (отгоре, # f0f9ff 0%, # a1dbff 100%); фон: -ms-линеен градиент (отгоре, # f0f9ff 0%, # a1dbff 100%); фон: линеен градиент (отгоре, # f0f9ff 0%, # a1dbff 100%);

В предишния ни урок направихме няколко Mixins, за да опростим този синтаксис. За щастие, някои хора в общността за уеб дизайн са наистина достатъчно щедри, за да спестят времето си, за да компилират тези полезни Mixins, така че ние не трябва да го компилираме от нулата..

И един от любимите ми е Less Elements, който съдържа много полезни CSS3 правила. По този начин сега записваме по-малко редове от код от досадни префикси на доставчици.

Добре, сега, нека да видим как всички тези съвети по-горе наистина могат да помогнат.

Поставянето им всички заедно

В този пример ще създам прост бутон за връзка. Първо бих искал да създам нов HTML документ и да поставя следната надценка:

     Кликни върху мен 

Създавам styles.less като наш основен LESS stylesheet, запишете го в същата папка с нашия HTML документ и добавете папката към WinLESS.

Импортирайте elements.less изтеглили сме преди да използваме този синтаксис:

@import "elements.less";

Сега, ние можем да използваме всички миксини, предоставени от елементите .градиент, .объл, и .граничи. Сигурен съм, че името на Миксинс е доста очевидно.

След това поставете правилата LESS по-долу във вашата таблица със стилове. И го запишете отново

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

От нашата .по-малко файлът е добавен към WinLESS, той автоматично ще бъде компилиран в .CSS. Сега да видим резултатите.

Е, това не е чак толкова зле, тъй като този бутон е създаден с по-малко линии, отколкото е необходимо. И тук е действително генерираният статичен CSS:

 a display: inline-block; подплата: 10px 20px; цвят: # 555; текст-декорация: няма; фон: #eeeeee; background: -webkit-gradient (линейно, ляво дъно, ляво отгоре, color-stop (0, # f0f0f0), color-stop (1, #ffffff)); background: -ms-linear-gradient (отдолу, # f0f0f0 0%, # f0f0f0 100%); background: -moz-linear-gradient (дъно на центъра, # f0f0f0 0%, #ffffff 100%); -bubkit-border-radius: 2px; -moz-border-radius: 2px; граничен радиус: 2px; -moz-background-clip: подложка; -webkit-background-clip: подложка-кутия; фон-клип: подложка-кутия; граница отгоре: твърда 1px #eeeeee; граница ляво: плътно 1px #eeeeee; Граница вдясно: плътно 1px #eeeeee; граница отдолу: твърда 1px #eeeeee;  a: hover фон: #eeeeee; background: -webkit-gradient (линейно, ляво дъно, ляво отгоре, color-stop (0, #ffffff), color-stop (1, # f0f0f0)); фон: -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 собственост.

.