Ефективно радите са ЛЕСС Типс анд Тоолс

У нашем претходном водичу, научили смо како да користимо ЛЕСС на практичан начин користећи апликације као што је ЦхрунцхАпп за компајлирање кода. Овај пут ћемо проћи кроз неке корисне савјете који ће бити у могућности да побољшају наше перформансе и продуктивност приликом компајлирања ЛЕСС синтаксе. Поставићемо радну / радну околину тако што ћемо омогућити истицање синтаксе за нашег тренутног уредника, користећи аутоматске алатке за компајлирање и коришћење унапред подешених Микинова, а затим их синхронизовати.

Па, ако сте спремни, почнимо.

Дисцлаимер: Следећи савети су изведени из свакодневних искустава као веб дизајнер. Дакле, пре него што прођемо даље, желим да нагласим да савети одговарају неким дизајнерима, а не другима; као и било који други савет који се налази на Вебу. Ипак, надам се да можете извући нешто корисно из следећих савета.

1. Цоде Хигхлигхтер

Као што смо већ споменули, упознали смо вас са ЦхрунцхАпп-ом. Међутим, ова апликација можда није предност сваког веб дизајнера; јер сваки дизајнер има своју радну околину, укључујући и уређивач кода по свом избору.

Уместо да инсталирате други едитор кода, можете и даље да користите тренутну и да омогућите осветљавање синтаксе у њему. Дакле, у овом посту ћу поделити неколико савета за додавање означавања ЛЕСС кода у 2 позната уређивача текста: Сублиме Тект 2 и Нотепад++.

Сублиме Тект 2

Овај уредник је тренутно мој омиљени избор да ми помогне да саставим кодове. Ова апликација је доступна за Виндовс, Линук и ОСКС, тако да без обзира на ваш ОС, и даље ћете моћи пратити овај савјет.

Сада ћемо га скинути са званичног сајта и испробати овај едитор. Затим прочитајте следећа упутства да бисте у њему омогућили осветљавање боје ЛЕСС.

Белешка: Проверите да ли сте прочитали лиценцу пре преузимања, пошто је бесплатна верзија намењена само оцењивању.

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

Прво отворите свој Сублиме Тект 2 и прикажите конзолу из овог менија Приказ> Прикажи конзолу

Затим копирајте и налепите следећу командну линију у конзолу, а затим притисните Ентер да бисте инсталирали контролу пакета са вБонд.нет:

импорт урллиб2, ос; пф = "Пацкаге Цонтрол.сублиме-пацкаге"; ипп = сублиме.инсталлед_пацкагес_патх (); ос.македирс (ипп), ако не ос.патх.екистс (ипп) Другие; урллиб2.инсталл_опенер (урллиб2.буилд_опенер (урллиб2.ПрокиХандлер ())); опен (ос.патх.јоин (ипп, пф), 'вб') .врите (урллиб2.урлопен ('хттп://сублиме.вбонд.нет/'+пф.реплаце (', '% 20')). реад ()); принт 'Молим рестартујте Сублиме Тект да завршите инсталацију'

Ово Пацкаге Цонсоле ће нам помоћи да инсталирамо врхунски пакет.

Инсталирање пакета за истицање ЛЕСС-а

Поново покрените Сублиме Тект 2 и покажите Цомманд Палетте из овог менија Алатке> Палета наредби. Сачекајте док се листа пакета не учита. Затим откуцајте Инсталл Пацкаге за претраживање и учитавање спремишта пакета.

Потом потражите ЛЕСС пакет из листе спремишта и притисните Ентер.

Сачекајте минут да Сублиме Тект 2 преузме и инсталира пакет док се на статусној траци не појави следећа обавештење.

Идите на мени Приказ> Синтакса, требало би да видите ЛЕСС на листи. То значи да узвишени текст 2 подржава .мање и ваша ЛЕСС синтакса би такође требало да има одговарајућу боју сада.

Нотепад++

Нотепад ++ је бесплатан едитор отвореног кода и има много корисних додатака за проширење његове функционалности. Такође је широко коришћен од стране многих веб дизајнера / програмера посебно оних који раде са Виндовс оперативним системом. Дакле, одлучио сам да укључим и савјет за додавање мањег истицања текста.

Инсталирајте ЛЕСС-означите у Нотепаду++

Омогућавање ЛЕСС боје у Нотепад ++ је прилично лако.

Прво преузмите ЛЕСС пакет за Нотепад ++ са овог линка (усерДефинеЛанг_ЛЕСС.кмл). Онда идите Виев> Усер-Дефинед Диалогуе.

Појавит ће се сљедећи скочни прозор испод. Кликните Увоз… и пронађите преузету датотеку .кмл филе. Затим поново покрените Нотепад++.

Отворите .лесс датотеку и идите на мени језика. Сада би требало да видите ЛЕСС укључено. Изаберите је да бисте применили истицање боје на вашој ЛЕСС синтакси.

Море Ресоурцес

На тржишту постоји много других уредника. Дакле, овдје ћемо укључити неке корисне линкове за вас ако не користите ниједан од горе наведених уредника.

Адобе ДреамВеавер

Без сумње, Дреамвеавер има огромну корисничку базу. Доступан је за Мац и Виндовс. Дакле, ако користите овај едитор, овде је један од добрих извора за инсталирање ЛЕСС означавања у Адобе ДреамВеавер.

Цода

Ако користите Мац, вероватно знате Цода, овај едитор је један од најпопуларнијих међу Мац корисницима. И, ево како можете инсталирати ЛЕСС у Цода.

Геани

То је један од популарнијих код уредника међу Линук корисницима. Неки рачунари у мојој канцеларији који раде на Линуку такође користе Геани. Дакле, ако га користите, можете укључити ЛЕСС означавање тако што ћете пратити ову инструкцију на СуперУсер.цом

2. ЛЕСС Цомпилер

За разлику од ЦхрунцхАпп-а који има уграђени ЛЕСС компајлер, остали уредници га неће имати по дефаулту. Иако постоје неки начини да се то укључи, али то је прилично техничко за опште кориснике. Зато је најбоље рјешење да направим компајлирање користећи сљедеће алате: ВинЛЕСС или ЛЕСС.апп. ВинЛЕСС је компајлер дизајниран за Виндовс, док је ЛЕСС.апп изграђен за ОСКС.

Ови алати могу аутоматски конвертовати ЛЕСС код у статичан ЦСС када сачувамо датотеку и директно извештавамо ако постоји грешка у коду. Па, дозволите ми да вам покажем колико је ова алатка:

Прво, желео бих да скинем ВинЛЕСС и да га инсталирам.

Кликните на дугме Додај фасциклу и пронађите директоријум у који сте ставили свој .мање (претпостављам да сте већ направили барем један). Једном када додате један; ВинЛЕСС ће скенирати и пронаћи све .мање датотеке и приказати вас на листи.

Идите на мени Датотека> Подешавање, и проверите да ли су ове опције проверене;

• Аутоматски компајлирајте датотеке када их сачувате
• Прикажи поруку о успешном компајлирању

Такође можемо да поставимо излазни фолдер, у случају да желимо да га сачувамо негде другде. Али, у овом примеру ћемо оставити ову опцију као што је она; што значи да ће излазни фајл бити сачуван у истом директоријуму као и .мање филе.

Отвори свој .мање датотеку из додатог директоријума, направите неколико измена и Сачувај.

ВинЛЕСС ће вас обавестити када је датотека успешно компајлирана .цсс или ако постоји грешка у кодовима. На овај начин можете директно да проверите излаз .цсс, а не да чекате да се кодови заврше да би га компајлирали.

Ако користите Мац, можете користити ЛЕСС.апп који има исту функционалност као и ВинЛЕСС.

Пресет Микинс

У тренутним модерним праксама веб дизајна, ми ћемо користити ЦСС3 својства као што су Градиент, Схадов или Бордер Радиус који изгледају овако:

-вебкит-бордер-радиус: 3пк; -моз-бордер-радиус: 3пк; бордер-радиус: 3пк;

или

бацкгроунд: -моз-линеар-градиент (топ, # ф0ф9фф 0%, # а1дбфф 100%); бацкгроунд: -вебкит-линеар-градиент (топ, # ф0ф9фф 0%, # а1дбфф 100%); бацкгроунд: -о-линеар-градиент (топ, # ф0ф9фф 0%, # а1дбфф 100%); бацкгроунд: -мс-линеар-градиент (топ, # ф0ф9фф 0%, # а1дбфф 100%); бацкгроунд: линеарно-градијент (топ, # ф0ф9фф 0%, # а1дбфф 100%);

У нашем претходном водичу направили смо неколико Микинс-а како бисмо поједноставили ову синтаксу. Срећом, неки људи у веб дизајнерској заједници су заиста довољно великодушни да штеде своје време за састављање ових корисних Микинова, тако да не морамо сами да их компајлирамо од нуле..

А један од мојих омиљених је Лесс Елементс који садржи многа корисна ЦСС3 правила. Дакле, сада напишемо мање линија кода од досадних префикса произвођача.

У реду, сада, да видимо како сви ови савјети горе могу стварно помоћи.

Ставља их све заједно

У овом примеру креирам једноставан линк линк. Прво бих желела да направим нови ХТМЛ документ и ставим следећу ознаку:

     Кликни ме 

Створити стилес.лесс као наш главни ЛЕСС стилесхеет, сачувајте га у истом фолдеру са нашим ХТМЛ документом и додајте га у ВинЛЕСС.

Импорт тхе елементс.лесс преузели смо пре употребе ове синтаксе:

@импорт "елементс.лесс";

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

Даље, ставите ЛЕСС правила испод, у ваш стилски лист. И, сачувајте још једном

 а дисплаи: инлине-блоцк; паддинг: 10пк 20пк; цолор: # 555; тект-децоратион: ноне; .бв-градиент (#еее, 240, 255); .роундед; .бордеред; &: ховер .бв-градиент (#еее, 255, 240);  

Од нашег .мање фајл је додан у ВинЛЕСС, аутоматски ће бити компајлиран у .цсс. Сада да видимо резултате.

Па, није тако лоше, зар не, с обзиром да је ово дугме креирано са мање линија него што је било потребно. И ево стварног генерисаног статичког ЦСС-а:

 а дисплаи: инлине-блоцк; паддинг: 10пк 20пк; цолор: # 555; тект-децоратион: ноне; бацкгроунд: #ееееее; бацкгроунд: -вебкит-градиент (линеарно, лево дно, леви врх, цолор-стоп (0, # ф0ф0ф0), цолор-стоп (1, #фффффф)); бацкгроунд: -мс-линеар-градиент (дно, # ф0ф0ф0 0%, # ф0ф0ф0 100%); бацкгроунд: -моз-линеар-градиент (дно центра, # ф0ф0ф0 0%, #фффффф 100%); -вебкит-бордер-радиус: 2пк; -моз-бордер-радиус: 2пк; бордер-радиус: 2пк; -моз-бацкгроунд-цлип: паддинг; -вебкит-бацкгроунд-цлип: паддинг-бок; бацкгроунд-цлип: паддинг-бок; бордер-топ: солид 1пк #ееееее; бордер-лефт: солид 1пк #ееееее; бордер-ригхт: солид 1пк #ееееее; бордер-боттом: солид 1пк #ееееее;  а: ховер бацкгроунд: #ееееее; бацкгроунд: -вебкит-градиент (линеарно, лево дно, леви врх, боја-стоп (0, #фффффф), боја-стоп (1, # ф0ф0ф0)); бацкгроунд: -мс-линеар-градиент (дно, #фффффф 0%, #фффффф 100%); бацкгроунд: -моз-линеар-градиент (централно дно, #фффффф 0%, # ф0ф0ф0 100%); 

Укратко

Ево кратког прегледа онога о чему смо расправљали у овом посту:

• Омогућавањем истицања синтаксе у нашем тренутном едитору, не морамо инсталирати додатни едитор само за компоновање ЛЕСС синтаксе; ово вам може уштедети простор / меморију на вашем диску.
• Такође више не морамо да преузимамо и повезујемо ЛЕСС.јс библиотеку у нашу секцију главе ХТМЛ-а као што смо то учинили у нашем последњем водичу. На тај начин наш ХТМЛ документ остаје чист и уредан.
• Коришћење алатки компајлера као што су ВинЛЕСС и ЛЕСС.апп могу генерисати статички ЦСС излаз одмах. Дакле, ако нешто није у реду са синтаксом, можемо је одмах прегледати.
• Пресет Микинс као ЛЕСС Елементс је наш најбољи пријатељ. То заиста може да уштеди време када компајлирамо досадан ЦСС3 својство.

.