Efektywna praca dzięki LESS Poradom i narzędziom

W naszym poprzednim samouczku nauczyliśmy się, jak używać LESS w praktyczny sposób, wykorzystując aplikacje takie jak ChrunchApp do kompilacji kodu. Tym razem przejdziemy przez kilka przydatnych wskazówek, które będą w stanie zwiększyć naszą wydajność i produktywność podczas kompilacji składni LESS. Zamierzamy skonfigurować nasze środowisko pulpitu / pracy, włączając podświetlanie składni dla naszego bieżącego edytora, używając automatycznych narzędzi kompilatora i wykorzystując gotowe miksy, a następnie zsynchronizować je wszystkie razem.

Cóż, jeśli jesteś gotowy, zacznijmy.

Zrzeczenie się: Wskazówki wyjaśnione poniżej pochodzą z moich codziennych doświadczeń jako projektanta stron internetowych. Zanim przejdziemy dalej, chciałbym przedstawić, że wskazówki mogą pasować do niektórych projektantów, a nie do innych; tak jak każda inna wskazówka znaleziona w sieci. Niemniej jednak mam nadzieję, że możesz czerpać z tego przydatne wskazówki.

1. Kod Highlighter

Jak wspomnieliśmy wcześniej, wprowadziliśmy Cię do ChrunchApp. Jednak ta aplikacja może nie być preferencją każdego projektanta stron internetowych; ponieważ każdy projektant ma własne środowisko pracy, w tym wybrany przez siebie edytor kodu.

Zamiast instalować inny edytor kodu, możesz nadal używać bieżącego i włączyć podświetlanie składni. W tym poście podzielę się kilkoma wskazówkami, aby dodać podświetlanie kodu LESS do 2 znanych edytorów tekstu: Wysublimowany tekst 2 i Notatnik++.

Wysublimowany tekst 2

Ten edytor jest obecnie moim preferowanym wyborem, aby pomóc mi tworzyć kody. Ta aplikacja jest dostępna dla systemów Windows, Linux i OSX, więc bez względu na to, jaki jest twój system operacyjny, nadal będziesz mógł śledzić tę wskazówkę.

Teraz pobierzmy go z oficjalnej strony i wypróbuj ten edytor. Następnie przeczytaj poniższe instrukcje, aby włączyć podświetlenie LESS kolorów.

Uwaga: Przed pobraniem upewnij się, że przeczytałeś licencję, ponieważ darmowa wersja jest przeznaczona tylko do oceny.

Zainstaluj konsolę pakietu

Najpierw otwórz tekst Sublime 2 i wyświetl konsolę z tego menu Widok> Pokaż konsolę

Następnie skopiuj i wklej następujący wiersz poleceń do konsoli, a następnie naciśnij klawisz Enter, aby zainstalować kontrolę pakietów z wBond.net:

import urllib2, os; pf = "Pakiet sterowania pakietem podrzędnym"; ipp = sublime.installed_packages_path (); os.makedirs (ipp) jeśli nie os.path.exists (ipp) inaczej Brak; 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 ()); drukuj „Uruchom ponownie Sublime Text, aby zakończyć instalację”

To Konsola pakietu pomoże nam zainstalować pakiet highlight.

Instalowanie pakietu podświetlającego LESS

Zrestartuj tekst Sublime 2 i wyświetl z tego menu Paletę poleceń Narzędzia> Paleta poleceń. Poczekaj, aż lista pakietów zostanie załadowana. Następnie wpisz Zainstaluj pakiet przeszukiwać i ładować repozytoria pakietów.

Następnie wyszukaj pakiet LESS z listy repozytoriów i naciśnij Enter.

Poczekaj chwilę, aż Sublime Text 2 pobierze i zainstaluje pakiet, aż na pasku stanu pojawi się następujące powiadomienie.

Przejdź do menu Widok> Składnia, powinieneś zobaczyć LESS na liście. Oznacza to, że tekst Sublime 2 jest obsługiwany .mniej a twoja składnia LESS powinna mieć teraz odpowiednie podświetlenie kolorów.

Notatnik++

Notepad ++ to darmowy, otwarty edytor kodu źródłowego i ma wiele przydatnych wtyczek, aby rozszerzyć jego funkcjonalność. Jest również powszechnie używany przez wielu projektantów / programistów internetowych, szczególnie tych, którzy pracują z systemem operacyjnym Windows. Postanawiam również dołączyć wskazówkę, aby dodać LESS do podświetlenia tekstu.

Zainstaluj LESS-highlight w Notatniku++

Włączenie LESS color highlight w Notepad ++ jest dość łatwe.

Najpierw pobierz pakiet LESS dla Notepad ++ z tego linku (userDefineLang_LESS.xml). Następnie przejdź do Zobacz> Dialog definiowany przez użytkownika.

Pojawi się poniższe okno podręczne. Kliknij Import… i znajdź pobrany plik .xml plik. Następnie uruchom ponownie Notatnik++.

Otwórz swój plik .less i przejdź do menu Język. Teraz powinieneś zobaczyć LESS. Wybierz go, aby zastosować podświetlenie kolorów w składni LESS.

Więcej zasobów

Na rynku jest wielu innych redaktorów. Więc tutaj dołączamy kilka przydatnych linków, jeśli nie korzystasz z żadnego z powyższych edytorów.

Adobe DreamWeaver

Niewątpliwie Dreamweaver ma ogromną bazę użytkowników. Jest dostępny zarówno dla komputerów Mac, jak i Windows. Tak więc, jeśli używasz tego edytora, oto jedno z dobrych źródeł do zainstalowania podświetlenia LESS w Adobe DreamWeaver.

Coda

Jeśli korzystasz z komputera Mac, prawdopodobnie znasz Codę, ten edytor jest jednym z najpopularniejszych wśród użytkowników komputerów Mac. I tutaj możesz zainstalować LESS w Codzie.

Geany

Jest to jeden z bardziej popularnych edytorów kodów wśród użytkowników Linuksa. Niektóre komputery w moim biurze działające na Linuksie również używają Geany. Jeśli więc go użyjesz, możesz dołączyć wyróżnienie LESS, postępując zgodnie z tą instrukcją na stronie SuperUser.com

2. Kompilator LESS

W przeciwieństwie do ChrunchApp, który ma wbudowany kompilator LESS, pozostałe edytory nie będą go domyślnie mieć. Chociaż istnieje kilka sposobów na włączenie go, ale jest raczej techniczny dla ogólnych użytkowników. Najlepszym rozwiązaniem jest więc skompilowanie za pomocą następujących narzędzi: WinLESS lub LESS.app. WinLESS to kompilator zaprojektowany dla systemu Windows, podczas gdy LESS.app jest zbudowany dla OSX.

Narzędzia te mogą automatycznie przekształcić nasz kod LESS w statyczny CSS, gdy zapisujemy plik i raportujemy bezpośrednio, jeśli w kodzie występuje błąd. Pozwólcie, że pokażę wam, jak garść tego narzędzia:

Po pierwsze, chciałbym pobrać WinLESS i zainstalować go.

Kliknij przycisk Dodaj folder i znajdź katalog, w którym umieściłeś swój folder .mniej pliki (zakładam, że już utworzyłeś co najmniej jeden). Po dodaniu jednego; WinLESS zeskanuje i znajdzie wszystko .mniej pliki i pokażę Ci na liście.

Przejdź do menu Plik> Ustawienia, i upewnij się, że te opcje są sprawdzone;

• Automatycznie kompiluj pliki po zapisaniu
• Pokaż wiadomość po pomyślnym skompilowaniu

Możemy także ustawić folder wyjściowy, na wypadek gdybyśmy chcieli go zapisać gdzie indziej. Ale w tym przykładzie pozostawimy tę opcję taką jaka jest; co oznacza, że ​​plik wyjściowy zostanie zapisany w tym samym katalogu co .mniej plik.

Otwórz swoje .mniej z dodanego katalogu, wprowadź kilka zmian i zapisz go.

WinLESS powiadomi Cię, gdy plik zostanie pomyślnie wkompilowany .css lub jeśli występuje błąd w kodach. W ten sposób możesz bezpośrednio sprawdzić wyjście .css, zamiast czekać na zakończenie kodu, aby go skompilować.

Jeśli używasz Maca, możesz użyć LESS.app, który ma taką samą funkcjonalność jak WinLESS.

Preset Mixins

W obecnych nowoczesnych praktykach projektowania stron internetowych użyjemy właściwości CSS3, takich jak Gradient, Shadow lub Border Radius, które wyglądają tak:

-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;

lub

tło: -moz-linear-gradient (góra, # f0f9ff 0%, # a1dbff 100%); background: -webkit-linear-gradient (góra, # f0f9ff 0%, # a1dbff 100%); background: -o-linear-gradient (góra, # f0f9ff 0%, # a1dbff 100%); tło: -ms-linear-gradient (góra, # f0f9ff 0%, # a1dbff 100%); background: linear-gradient (góra, # f0f9ff 0%, # a1dbff 100%);

W naszym poprzednim samouczku zrobiliśmy kilka miksów, aby uprościć tę składnię. Na szczęście niektórzy ludzie ze społeczności projektantów stron internetowych są naprawdę hojni, aby poświęcić swój czas na skompilowanie tych przydatnych miksów, abyśmy nie musieli sami kompilować ich od zera.

A jednym z moich ulubionych jest Less Elements, który zawiera wiele przydatnych reguł CSS3. Dlatego teraz piszemy mniej wierszy kodu z żmudnych prefiksów dostawcy.

W porządku, zobaczmy, jak wszystkie powyższe wskazówki mogą naprawdę pomóc.

Wszystko razem

W tym przykładzie stworzę prosty przycisk łącza. Najpierw chciałbym utworzyć nowy dokument HTML i wstawić następującą marżę:

     Kliknij 

Stwórz styles.less jako nasz główny arkusz stylów LESS, zapisz go w tym samym folderze z naszym dokumentem HTML i dodaj folder do WinLESS.

Importuj elements.less pobraliśmy przed użyciem tej składni:

@import „elements.less”;

Teraz możemy użyć dowolnych miksów dostarczonych z elementów .gradient, .bułczasty, i .graniczy. Jestem pewien, że nazwa Mixins jest dość oczywista.

Następnie poniżej umieść reguły LESS w swoim arkuszu stylów. I zapisz go jeszcze raz

 a display: inline-block; dopełnienie: 10px 20px; kolor: # 555; dekoracja tekstowa: brak; .bw-gradient (#eee, 240, 255); .bułczasty; graniczy; &: hover .bw-gradient (#eee, 255, 240);  

Od naszego .mniej plik został dodany do WinLESS, zostanie automatycznie wkompilowany .css. Zobaczmy teraz wyniki.

Cóż, nie jest tak źle, nie biorąc pod uwagę, że ten przycisk został utworzony z mniejszą liczbą linii niż było to potrzebne. I tutaj jest wygenerowany statyczny CSS:

 a display: inline-block; dopełnienie: 10px 20px; kolor: # 555; dekoracja tekstowa: brak; tło: #eeeeee; background: -webkit-gradient (liniowy, lewy dolny, lewy górny, kolor-stop (0, # f0f0f0), color-stop (1, #ffffff)); tło: -ms-linear-gradient (dół, # f0f0f0 0%, # f0f0f0 100%); tło: -moz-linear-gradient (środkowe dno, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-background-clip: dopełnienie; -webkit-background-clip: pole dopełnienia; background-clip: padding box; border-top: solid 1px #eeeeee; border-left: solid 1px #eeeeee; border-right: solid 1px #eeeeee; border-bottom: bryła 1px #eeeeee;  a: hover background: #eeeeee; background: -webkit-gradient (liniowy, lewy dolny, lewy górny, kolor-stop (0, #ffffff), zatrzymanie koloru (1, # f0f0f0)); tło: -ms-linear-gradient (dół, #ffffff 0%, #ffffff 100%); tło: -moz-linear-gradient (środkowe dno, #ffffff 0%, # f0f0f0 100%); 

W podsumowaniu

Oto krótkie podsumowanie tego, co omówiliśmy w tym poście:

• Włączając podświetlanie składni w naszym bieżącym edytorze, nie musimy instalować dodatkowego edytora tylko do komponowania składni LESS; może to zaoszczędzić trochę przestrzeni / pamięci na dysku.
• Nie musimy już pobierać i łączyć biblioteki LESS.js z naszą sekcją główki HTML, tak jak w poprzednim samouczku. W ten sposób nasz dokument HTML pozostaje czysty i schludny.
• Korzystanie z narzędzi kompilatora, takich jak WinLESS i LESS.app, może natychmiast wygenerować statyczny wynik CSS. Więc jeśli coś jest nie tak z tą składnią, możemy ją natychmiast zbadać.
• Preset Mixins jak LESS Elements jest naszym najlepszym przyjacielem. To może naprawdę zaoszczędzić nasz czas podczas kompilacji żmudnej właściwości CSS3.

.