Een selectie van opdrachtgevers

VI substitutie

Met alle IDE's die tot je beschikking kunnen staan (persoonlijke voorkeur is NetBeans) is het soms niet mogelijk om "even" iets te doen, maar vaak kan het met VI wel (als je maar weet hoe)

VI is een simpele doch krachtige tekst-editor en bekend bij iedereen die iets met een CLI heeft gedaan op Linux, Unix of Mac. Het is een editor waar je even snel een bestandje mee kunt aanpassen, maar ook snelle en krachtige substituties mee kan doen. Vroegâh, toen ik nog bij PharmaPartners werkte (dan hebben we het over 2004) heb ik een spoedcursus vi substitutie voor gevorderden gehad van oudgediende Manfred. Daar was het vooral handig omdat er nog veel gebruik werd gemaakt van shell-scripts om data-manipulatie / -conversie uit te voeren. En vandaag de dag komt die archaïsche kennis nog steeds van pas. 

 

Probleemstelling

Ik heb een directory vol icoontjes die ik wil gebruiken als classes om in te kunnen zetten in mijn applicatie. Ja, dat kan heel eenvoudig met Compass, maar daar kan in dit geval geen gebruik van worden gemaakt.

 

Dus wat doe je dan? VI!

Allereerst een lijst van bestandsnamen creëeren:

ls > iconen.css

 

Nu hebben we een CSS bestand met een lijst van bestanden, bijv:

pijl-links.png
pijl-rechts.png

etc

 

Nu is het de bedoeling dat er iets CSS'erigs uit komt zoals

.pijl-links { background-image: url('pijl-links.png'); }
.pijl-rechts { background-image: url('pijl-rechts.png'); }

 

Dan komt die vermaledijde vi om de hoek:

vi iconen.css

 

Allereerst kopiëren we de lijst in 2 kolommen (kopieer tot en met de punt):

:%s/.*\./& &

 

Resultaat:

pijl-links. pijl-links.png
pijl-rechts. pijl-rechts.png

 

Vervolgens de punt achter de eerste kolom verwijderen:

:%s/\./

 

Resultaat:

pijl-links pijl-links.png
pijl-rechts pijl-rechts.png

 

Wijzig spatie in background statement:

:%s/\ / { background-image: url('/

 

Resultaat:

pijl-links { background-image:url('pijl-links.png
pijl-rechts { background-image:url('pijl-rechts.png
 

Verander het einde van de regel in '); }

:%s/$/'); }/

 

Resultaat:

pijl-links { background-image:url('pijl-links.png'); }
pijl-rechts { background-image:url('pijl-rechts.png'); }

 

Tenslotte het begin van de regel aanpassen zodat er een class-definitie ontstaat:

:%s/^/.icon-/

 

Resultaat:

.icon-pijl-links { background-image:url('pijl-links.png'); }
.icon-pijl-rechts { background-image:url('pijl-rechts.png'); }
 

En klaar! Een paar eenvoudige statements die niet opwegen tegen maken van een macro in NetBeans. 

Tags

VI