Effectief werken met MINDER Tips en Tools

In onze vorige tutorial hebben we geleerd om LESS op een praktische manier te gebruiken door applicaties zoals ChrunchApp te gebruiken om de code te compileren. Deze keer zullen we enkele handige tips doornemen die onze prestaties en productiviteit kunnen verbeteren bij het samenstellen van MINDER syntaxis. We gaan onze desktop- / werkomgeving instellen door syntaxisaccentuering in te schakelen voor onze huidige editor, automatische compilertools te gebruiken en vooraf ingestelde Mixins te gebruiken en ze vervolgens allemaal samen te synchroniseren.

Nou, als je klaar bent, laten we beginnen.

Disclaimer: De onderstaande tips zijn afgeleid van mijn dagelijkse ervaringen als webdesigner. Dus, voordat we verder gaan, wil ik aangeven dat de tips geschikt zijn voor sommige ontwerpers en niet voor andere; net als elke andere tip die u op internet vindt. Desalniettemin hoop ik dat u iets nuttigs kunt oogsten uit de volgende tips.

1. Code markeerstift

Zoals we eerder hebben vermeld, hebben we u kennis laten maken met ChrunchApp. Het is echter mogelijk dat deze app niet de voorkeur van elke webdesigner heeft; omdat elke ontwerper zijn eigen werkomgeving heeft, inclusief de code-editor van zijn keuze.

In plaats van een andere code-editor te installeren, kunt u eigenlijk uw huidige code-editor gebruiken en de syntaxisaccentuering inschakelen. Dus, in dit bericht, zal ik enkele tips delen om LESS code highlighting toe te voegen aan 2 beroemde teksteditors: Sublieme tekst 2 en blocnote++.

Sublieme tekst 2

Deze editor heeft momenteel mijn voorkeur om me te helpen bij het opstellen van codes. Deze app is beschikbaar voor Windows, Linux en OSX, dus wat je besturingssysteem ook is, je kunt nog steeds deze tip volgen.

Laten we het nu van de officiële website downloaden en deze editor proberen. Lees vervolgens de volgende instructies om MINDER kleuraccentatie erin in te schakelen.

Notitie: Zorg ervoor dat je de licentie hebt gelezen voordat je deze downloadt, omdat de gratis versie alleen bedoeld is voor evaluatie.

Installeer pakketconsole

Open eerst uw Sublime-tekst 2 en geef de console weer vanuit dit menu Beeld> Show Console

Kopieer en plak vervolgens de volgende opdrachtregel in de console en druk op Enter om het pakketbeheer van wBond.net te installeren:

import urllib2, os; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path (); os.makedirs (ipp) if not os.path.exists (ipp) else None; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); geopend (os.path.join (IPP, pf), 'WB') .write (urllib2.urlopen ( 'http://sublime.wbond.net/'+pf.replace (", '% 20')). lees ()); print 'Start Sublime Text opnieuw op om de installatie te voltooien'

Deze Pakketconsole helpt ons bij het installeren van het highlight-pakket.

LESS-highlighting-pakket installeren

Start Sublime Text 2 opnieuw en geef Command Palette weer vanuit dit menu Hulpmiddelen> Opdrachtenpalet. Wacht tot de pakketlijst volledig is geladen. Typ dan Installeer pakket om pakketrepository's te doorzoeken en te laden.

Zoek vervolgens naar het LESS-pakket uit de repositorylijst en druk op Enter.

Wacht een minuut tot Sublime Text 2 het pakket download en installeert totdat de volgende melding op de statusbalk verschijnt.

Ga naar het menu Beeld> Syntaxis, je zou MINDER in de lijst moeten zien. Dit betekent dat de Sublime-tekst 2 ondersteuning biedt .minder en uw LESS-syntaxis moet nu ook de juiste kleurmarkering hebben.

blocnote++

Notepad ++ is een gratis, open source code-editor en heeft veel nuttige plug-ins om zijn functionaliteit uit te breiden. Het wordt ook veel gebruikt door veel webontwerpers / ontwikkelaars, met name degenen die met het Windows-besturingssysteem werken. Dus ik besloot om ook de tip toe te voegen om er MINDER tekstmarkering voor toe te voegen.

Installeer LESS-markering in Kladblok++

Het inschakelen van MINDER kleurmarkering in Notepad ++ is vrij eenvoudig.

Download eerst het LESS-pakket voor Notepad ++ via deze link (userDefineLang_LESS.xml). Ga dan naar Weergave> Door gebruiker gedefinieerde dialoog.

Het onderstaande pop-upvenster verschijnt. Klik op de Importeren… knop en zoek je gedownloade .xml het dossier. Start vervolgens het Kladblok opnieuw++.

Open uw .less-bestand en ga naar het menu Taal. Je zou nu MINDER inbegrepen moeten zien. Selecteer het om kleuraccentuering toe te passen op uw LESS-syntaxis.

Meer middelen

Er zijn veel andere editors op de markt. Daarom hebben we hier enkele handige links voor u als u geen van de bovenstaande editors gebruikt.

Adobe DreamWeaver

Ongetwijfeld heeft Dreamweaver een enorm gebruikersbestand. Het is beschikbaar voor zowel Mac als Windows. Dus, als u deze editor gebruikt, is hier een van de goede bronnen om LESS-markeringen in Adobe DreamWeaver te installeren.

koda

Als je Mac gebruikt, ken je Coda waarschijnlijk, deze editor is een van de meest populaire onder Mac-gebruikers. En, hier is hoe je MINDER in Coda kunt installeren.

Geany

Het is een van de meer populaire code-editors onder Linux-gebruikers. Sommige computers in mijn kantoor die op Linux draaien gebruiken ook Geany. Dus als u het ook gebruikt, kunt u MINDER highlight toevoegen door deze instructie op SuperUser.com te volgen

2. MINDER Compileerprogramma

In tegenstelling tot de ChrunchApp die een ingebouwde LESS-compiler heeft, hebben de andere editors dit standaard niet. Hoewel er enkele manieren zijn om het op te nemen, maar het is nogal technisch voor algemene gebruikers. Dus de beste oplossing die ik heb is om het samenstellen te doen met behulp van de volgende hulpmiddelen: puntloos of LESS.app. WinLESS is een compiler ontworpen voor Windows, terwijl de LESS.app is gebouwd voor OSX.

Deze tools kunnen onze LESS-code automatisch in een statische CSS converteren, omdat we het bestand opslaan en direct rapporteren als er een fout in de code zit. Nou, laat me je laten zien hoe handvol deze tool is:

Allereerst wil ik WinLESS downloaden en installeren.

Klik op de knop Map toevoegen en zoek de map waar u de map hebt geplaatst .minder bestanden (ik neem aan dat je er al een hebt gemaakt). Zodra u er een toevoegt; WinLESS zal alles scannen en vinden .minder bestanden en laat u zien in de lijst.

Ga naar menu Bestand> Instelling, en zorg ervoor dat deze opties worden gecontroleerd;

• Automatisch bestanden compileren wanneer ze worden opgeslagen
• Toon bericht bij succesvol compileren

We kunnen ook de uitvoermap instellen, voor het geval we deze elders willen bewaren. Maar in dit voorbeeld laten we deze optie zoals hij is; wat betekent dat het uitvoerbestand zal worden opgeslagen in dezelfde map als de .minder het dossier.

Open je .minder bestand uit de toegevoegde map, maak een paar wijzigingen en sla het op.

WinLESS zal u op de hoogte brengen wanneer het bestand met succes is gecompileerd .css of als er een fout in de codes zit. Op deze manier kunt u de uitvoer van .css rechtstreeks controleren, in plaats van te moeten wachten tot de codes zijn voltooid om deze te compileren.

Als u Mac gebruikt, kunt u LESS.app gebruiken met dezelfde functionaliteit als WinLESS.

Vooraf ingestelde mixins

In de huidige moderne webontwerppraktijken zullen we CSS3-eigenschappen zoals Gradient, Shadow of Border Radius gebruiken die er als volgt uitzien:

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

of

achtergrond: -moz-linear-gradient (boven, # f0f9ff 0%, # a1dbff 100%); achtergrond: -webkit-lineair verloop (boven, # f0f9ff 0%, # a1dbff 100%); achtergrond: -o-lineaire gradiënt (boven, # f0f9ff 0%, # a1dbff 100%); achtergrond: -ms-lineaire gradiënt (boven, # f0f9ff 0%, # a1dbff 100%); achtergrond: lineair verloop (boven, # f0f9ff 0%, # a1dbff 100%);

In onze vorige tutorial hebben we enkele Mixins gemaakt om deze syntaxis te vereenvoudigen. Gelukkig zijn sommige mensen in de webontwerpgemeenschap echt genereus genoeg om hun tijd te sparen om deze nuttige Mixins te compileren, zodat we het niet zelf van nul moeten compileren.

En, een van mijn favorieten is Less Elements, dat veel handige CSS3-presetregels bevat. We schrijven nu dus minder coderegels van voorvoegsels van vervelende leveranciers.

Oké, laten we eens kijken hoe al deze tips hierboven echt kunnen helpen.

Alles samenvoegen

In dit voorbeeld ga ik een eenvoudige linkknop maken. Eerst zou ik een nieuw HTML-document willen maken en de volgende opmaak willen plaatsen:

     Klik hier 

Maak een styles.less als ons belangrijkste LESS-stylesheet, sla het op in dezelfde map met ons HTML-document en voeg de map toe aan WinLESS.

Importeer de elements.less we hebben gedownload voordat deze syntaxis is gebruikt:

@import "elements.less";

Nu kunnen we alle door elementen verstrekte mixins gebruiken .helling, .afgeronde, en .omzoomd. Ik weet zeker dat de naam Mixins vrij duidelijk is.

Zet vervolgens de onderstaande MINDER-regels in uw stylesheet. En bewaar het nogmaals

 een display: inline-block; opvulling: 10px 20px; kleur: # 555; tekstdecoratie: geen; .bw-gradient (#eee, 240, 255); .rounded; .bordered; &: hover .bw-gradient (#eee, 255, 240);  

Sinds onze .minder bestand is toegevoegd aan WinLESS, het zal automatisch worden gecompileerd .css. Laten we nu de resultaten bekijken.

Nou, het is niet zo erg, gezien het feit dat deze knop is gemaakt met minder regels dan nodig was. En, hier is de daadwerkelijk gegenereerde statische CSS:

 een display: inline-block; opvulling: 10px 20px; kleur: # 555; tekstdecoratie: geen; achtergrond: #eeeeee; achtergrond: -webkit-gradiënt (lineair, linksonder, linksboven, kleur-stop (0, # f0f0f0), kleur-stop (1, #ffffff)); achtergrond: -ms-lineaire gradiënt (onder, # f0f0f0 0%, # f0f0f0 100%); achtergrond: -moz-linear-gradient (midden onderaan, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; grensradius: 2px; -moz-achtergrond-clip: opvulling; -webkit-achtergrond-clip: opvulling-box; achtergrond-clip: padding-box; border-top: solid 1px #eeeeee; border-left: solid 1px #eeeeee; border-right: solid 1px #eeeeee; border-bottom: solid 1px #eeeeee;  a: hover background: #eeeeee; achtergrond: -webkit-gradiënt (lineair, linksonder, linksboven, kleur-stop (0, #ffffff), kleur-stop (1, # f0f0f0)); achtergrond: -ms-linear-gradient (onder, #ffffff 0%, #ffffff 100%); achtergrond: -moz-linear-gradient (midden onderaan, #ffffff 0%, # f0f0f0 100%); 

Samengevat

Hier is een korte samenvatting van wat we hebben besproken in dit bericht:

• Door syntaxisaccentuering in onze huidige editor in te schakelen, hoeven we niet alleen een extra editor te installeren voor het samenstellen van de LESS-syntaxis; dit kan u spaties / geheugen op uw schijf besparen.
• We hoeven de LESS.js-bibliotheek niet langer te downloaden en te linken naar onze HTML-headsectie zoals we deden in onze laatste tutorial. Op deze manier blijft ons HTML-document schoon en netjes.
• Het gebruik van compileerhulpmiddelen zoals WinLESS en LESS.app kan de statische CSS-uitvoer direct genereren. Dus als er iets mis is met de syntaxis, kunnen we het meteen bekijken.
• Vooraf ingestelde mixins zoals LESS Elements is onze beste vriend. Het kan echt onze tijd sparen bij het samenstellen van saaie CSS3-eigendommen.

.