Tot nu toe hebben we PostCSS gebruikt om dingen te doen zoals het optimaliseren van stylesheets, het toevoegen van functionaliteit voor preprocessing en het genereren van bepaalde naamgevingsconventies, maar hoe kan het helpen om gewoon oude CSS te schrijven??
Er zijn zoveel kleine stukjes code die de gemiddelde webontwerper duizenden keren uittypt in de loop van hun carrière, en als je slechts een beetje tijd terug kunt winnen op elk stuk, komt het uiteindelijk allemaal goed.
In deze zelfstudie gebruiken we PostCSS om elke dag de code-tijd te verkorten via een reeks snelkoppelingen en steno-toevoegingen. Laten we beginnen!
Stel uw project in
U kent dit proces nu al, maar het eerste dat u moet doen, is uw project instellen om Gulp of Grunt te gebruiken. Als je nog geen voorkeur hebt voor Gulp, raad ik Gulp aan, omdat je minder code nodig hebt om dezelfde doelen te bereiken, dus je zou het wat eenvoudiger moeten vinden om met Gulp te werken.
U kunt lezen over het instellen van Gulp- of Grunt-projecten voor PostCSS in de vorige zelfstudies
PostCSS snelstartgids: Gulp instellen of
PostCSS-snelstartgids: Gromde opstelling
respectievelijk.
Als u uw project echter niet helemaal opnieuw wilt instellen, kunt u de bronbestanden downloaden die aan deze zelfstudie zijn gekoppeld en het meegeleverde Gulp- of Grunt-startersproject uitpakken in een lege projectmap. Voer vervolgens de opdracht uit met een terminal of opdrachtprompt die naar de map wijst npm installeren.
Installeer plug-ins
Voor deze zelfstudie installeren we verschillende plug-ins, die elk een ander type snelkoppeling of steno hanteren.
Of je nu Gulp of Grunt gebruikt, voer de volgende opdracht in je projectmap uit om de plug-ins te installeren die we zullen gebruiken:
Nu zijn we klaar om de plug-ins in uw project te laden.
Laad plug-ins via Gulp
Als u Gulp gebruikt, voegt u deze variabelen toe onder de variabelen die al in het bestand staan:
var alias = require ('postcss-alias'); var crip = require ('postcss-crip'); var goochelaar = vereisen ('postcss-font-goochelaar'); var triangle = require ('postcss-triangle'); var circle = require ('postcss-circle'); var linkColors = require ('postcss-all-link-colors'); var center = require ('postcss-center'); var clearfix = vereisen ('postcss-clearfix'); var position = require ('postcss-position'); var size = require ('postcss-size'); var verthorz = require ('postcss-verthorz'); var colorShort = require ('postcss-color-short');
Voeg nu elk van die nieuwe variabelenamen toe aan uw processors array:
Voer een snelle test uit dat alles werkt door de opdracht uit te voeren slok css controleer vervolgens of er een nieuw "style.css" -bestand is verschenen in de map "dest" van uw project.
Laad plug-ins via Grunt
Als u Grunt gebruikt, werk dan het processors object, dat is genest onder de opties object, naar het volgende:
Voer een snelle test uit dat alles werkt door de opdracht uit te voeren grunt postcss controleer vervolgens of er een nieuw "style.css" -bestand is verschenen in de map "dest" van uw project.
Oké, nu je plug-ins allemaal zijn geïnstalleerd, laten we ze leren om ze te gebruiken voor CSS-snelkoppelingen en steno's.
Gebruik stenografie voor eigenschappen
Er zijn veel eigenschappen die we steeds opnieuw moeten typen en voorbij opnieuw in CSS. Natuurlijk is de tijd die het kost om een handvol tekens een keer in te typen erg klein, maar na jaren van ontwikkeling komt het allemaal goed. We gaan hier kijken naar twee plug-ins waarmee je die eigenschappen kunt inkorten tot steno-versies om een snelle en soepele stroom te krijgen terwijl je je CSS uitveegt.
Definieer uw eigen steno
Met de plug-in postcss-alias van Sean King kunt u uw eigen steno of "aliassen" definiëren voor alle eigenschappen die u wilt afkorten. Dit geeft je een manier om ervoor te zorgen dat de steno die je gebruikt past bij de manier waarop je geest werkt en dus gemakkelijk te onthouden is.
Als u enkele aliassen wilt definiëren, voegt u boven aan uw stylesheet een at-rule toe met de syntaxis @alias .... Voer vervolgens in de at-rule-configuratie je aliassen in door toe te voegen alias-name: property-name;.
Voeg het volgende voorbeeld toe aan uw "src / style.css" -bestand, waarmee aliassen worden ingesteld voor de border-size, border-style en rand kleur eigenschappen:
Lees meer over postcss-alias op: https://github.com/seaneking/postcss-alias
Plug 'n' Play Shorthand
Als je veel eigendomsshorten wilt gebruiken, maar je wilt niet de stappen doorlopen om ze allemaal zelf te definiëren, kun je de plug-in postcss-crip van Johnie Hjelm bekijken die honderden afkortingen voor eigenschappen bevat die klaar zijn voor plug-ins en gebruik spelen.
Voeg bijvoorbeeld de volgende code toe aan uw "src / style.css" -bestand, dat een afkorting voor de bevat margin-top, margin-right, margin-bottom en -Marge eigenschappen:
Lees meer over postcss-crip op: https://github.com/johnie/postcss-crip
En zie de volledige lijst met afkortingen voor eigenschappen op: https://github.com/johnie/crip-css-properties
Uitvoer @ font-face in One Line
De postcss-font-goochelaar plugin van Jonathan Neal doet zijn naam eer aan. Hiermee kunt u aangepaste lettertypen gebruiken via een eenvoudige font-family regel alsof u een standaardlettertype gebruikt, en het lettertype werkt gewoon magisch.
Voeg de volgende code toe aan uw "src / style.css" bestand:
lichaam font-family: "Indie Flower";
Dat is het. Dat is alles wat nodig is om gebruik te maken van postcss-font-goochelaar. Geen speciale syntaxis, gebruik gewoon de naam van het lettertype zoals u dat ook zou doen.
In dit geval is het lettertype Indie Flower een lettertype dat ik heb geselecteerd in de bibliotheek van Google Fonts. Ik heb geen aangepaste lettertypebestanden toegevoegd aan mijn project, dus de plug-in zal dat zien en in plaats daarvan gaan controleren of mijn opgegeven lettertype beschikbaar is via Google Fonts. Als het ontdekt dat het beschikbaar is, maakt het de juiste @ Font-face code volledig automatisch.
Compileer je bestand en kijk dan naar je "dest / style.css" -bestand, waar je deze code ziet worden toegevoegd:
@ font-face font-family: "Indie Flower"; lettertype: normaal; font-gewicht: 400; src: local ("Indie Flower"), local (IndieFlower), url (// fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nZ2MAKAc2x4R1uOSeegc5U.eot?#) format ("eot"), url (// fonts. gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2) format ("woff2"), url (// fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff) format ("woff" );
U kunt controleren of het lettertype correct wordt geladen door een nieuw bestand in uw "dest" -map met de naam "index.html" te maken en deze code eraan toe te voegen:
Test koers
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium bibendum nisl. Mauris eget orci eget nisi tristique lobortis. Pellentesque rutrum id ligula quis tempus. Vivamus tempus, justo op semper volutpat, lorem justo tincidunt urna, in mattis lorem dolor condimentum diam. Ut dapibus nunc auctor felis viverra posuere. Aenean efficitur efficitur nisi. Vivamus leo felis, sempre quis rutrum eu, eleifend eu quam.
Om de lettertypen te laden, moet u dit bestand bekijken via een http: // adres, in plaats van een het dossier:// adres, dus upload het bestand naar een webhost of gebruik een app zoals Prepros om een live preview te maken.
Je zou het lettertype Indie Flower op al je tekst moeten toepassen, zoals:
Lees hier meer over postcss-font-magician: https://github.com/jonathantneal/postcss-font-magician
Maak CSS-vormen
Als je ooit pure CSS hebt gebruikt om vormen te maken, weet je dat het een geweldige manier kan zijn om dingen als cirkels en driehoeken toe te voegen aan je ontwerpen, maar dat het ook behoorlijk lastig kan zijn. Vooral in het geval van driehoeken, kan het uitvogelen van welke code je nodig hebt om een vorm in de juiste richting op de juiste maat te krijgen, enigszins intuïtief aanvoelen.
Dat is waar de postcss-circle en postcss-driehoek plug-ins van Jed Mao te hulp komen. Beide plug-ins creëren een vereenvoudigde syntaxis en een intuïtieve manier om cirkels en driehoeken te maken met pure CSS.
Voeg een cirkel toe
Gebruik de syntaxis om een cirkel te maken cirkel: maat kleur;. Voeg de volgende code toe aan uw "src / style.css" bestand:
.cirkel cirkel: 8rem # c00;
Compileer het en je ziet de volgende code toegevoegd aan je "dest / style.css" bestand:
Voeg deze HTML nu toe aan het bestand "dest / index.html" dat u in de laatste sectie hebt gemaakt:
Bekijk je bestand in een browser opnieuw en je ziet nu een rode cirkel:
Lees meer over postcss-circle op: https://github.com/jedmao/postcss-circle
Voeg een driehoek toe
Er zijn drie soorten driehoeken die u kunt toevoegen met behulp van deze plug-in; gelijkbenige, rechts-gelijkbenige en gelijkzijdige. Elk heeft iets verschillende sets van syntaxis, waarover je volledig kunt lezen in de Github repo van de plug-in.
We gaan door het toevoegen van een gelijkbenige driehoek, waarvan de syntaxis is:
Om de driehoek in je "dest / index.html" bestand te zien, voeg je deze html toe:
Wanneer u dit bestand in uw browser vernieuwt, ziet u nu een rood gelijkbenig driehoekje dat naar rechts wijst:
Lees meer over postcss-triangle op: https://github.com/jedmao/postcss-triangle
Gebruik snelkoppelingen voor algemene taken
Stel Link Styling in
Het instellen van kleuren voor links is een taak die in elk project moet worden gedaan en vereist instellingsstijlen voor standaardkoppelingen en vier verschillende linkstatussen. Met de plug-in postcss-all-link-colours van Jed Mao kunt u dat proces korter maken door de kleuren voor al uw links tegelijk uit te voeren.
Voeg het volgende toe aan uw "src / style.css":
een @ link-kleuren alle # 4D9ACC;
Compileer vervolgens uw bestand en u zult zien dat alle vereiste linkstatussen zijn ingesteld:
U hebt ook de optie om een andere kleur voor een specifieke status te genereren. Voeg eenvoudig enkele accolades aan het einde van de regel toe en binnenin die de syntaxis gebruiken staat: kleur;.
Werk de code die u zojuist aan uw "src / style.css" -bestand hebt toegevoegd bij naar het volgende:
a @ link-colors all # 4D9ACC hover: # 5BB8F4;
Wanneer u nu compileert, ziet u dat de hover-status een andere kleur heeft dan de rest van de stijlen:
Lees meer over postcss-all-link-kleuren op: https://github.com/jedmao/postcss-all-link-colors
Verticaal of Horizontaal centreren
Centreren, verticaal of horizontaal, is een van die taken die een eeuwige doorn in het oog is van CSS-ontwikkelaars. Jed Mao's postcss-center plugin maakt de taak een stuk eenvoudiger met de introductie van midden boven; voor verticaal centreren, en links: midden; voor horizontale centrering.
Voeg deze code toe aan uw "src / style.css" bestand:
Notitie: het centreren maakt gebruik van absolute positionering, dus u moet uw gecentreerde elementen omwikkelen met een ouder die relatieve, absolute of vaste positionering gebruikt. Aangezien absoluut gepositioneerde elementen geen invloed hebben op de hoogte of breedte van hun ouders, moet u ook de hoogte en breedte van het bovenliggende element instellen.
Voeg bijvoorbeeld toe links: midden; naar de .cirkel klasse die je eerder hebt gemaakt, zodat deze horizontaal gecentreerd is:
.cirkel cirkel: 8rem # c00; links: midden;
Voeg vervolgens deze tweede klasse toe om als een omhulsel rond de cirkel te fungeren, door deze een relatieve positionering en een hoogte te geven die overeenkomt met de cirkel:
.circle_wrap position: relative; hoogte: 8rem;
Voeg nu een element met deze klasse toe als een omslag rond uw bestaande cirkel-HTML:
Wanneer je teruggaat en je pagina vernieuwt, zou je moeten zien dat je cirkel horizontaal gecentreerd is:
Lees meer over postcss-center op: https://github.com/jedmao/postcss-center
Uitvoer Clearfix in One Line
In elk ontwerp met drijvers is het maken van een clearfix-klasse zo handig dat het zo ongeveer essentieel is. Sean King's postcss-clearfix plug-in maakt het maken van die clearfix-styling naar een one-line job, door toe te voegen repareren als een mogelijke waarde die kan worden gebruikt met de duidelijk eigendom.
Voor een clearfix die werkt op IE8 + voegt u het volgende toe aan uw "src / style.css" bestand:
.clearfixed clear: fix;
Bij het compileren ziet u dat het de volgende clearfix-code heeft geproduceerd, klaar voor gebruik:
.clearfixed: na content: "; display: table; clear: both;
Als u een clearfix nodig heeft die werkt op IE6 +, gebruik dan de waarde fix-legacy in plaats van gewoon repareren, zoals zo:
.clearfixed_legacy clear: fix-legacy;
Wanneer deze code wordt gecompileerd, ziet u dat deze een beetje extra inhoud bevat die het gebruiksvriendelijk maakt voor oudere browsers:
.clearfixed_legacy: before, .clearfixed_legacy: after content: "; display: table; .clearfixed_legacy: after clear: both; .clearfixed_legacy zoom: 1;
Lees meer over postcss-clearfix op: https://github.com/seaneking/postcss-clearfix
Stel positionering in op één regel
Wanneer u niet-standaard positionering wilt gebruiken, d.w.z.. absoluut, vast of familielid, je moet de waarden voor de elementen typen top, rechts, bodem en links positionering handmatig. Er is geen afkorting zoals u zou kunnen gebruiken bij het instellen van marges of opvulling op één regel. Dat wil zeggen, totdat je de postcss-positie-plugin van Sean King installeert.
Met deze plug-in, wanneer u de positie eigenschap, na het instellen van een waarde van absoluut / vast / familielid, je kunt verklaren top, rechts, bodem en links waarden op dezelfde regel.
Voeg de volgende voorbeeldcode toe aan uw "src / style.css" -bestand:
.absolute position: absolute 1rem 1rem 0 0;
Na de compilatie ziet u dat de stenografie is gecompileerd in de afzonderlijke regels die u normaal handmatig zou moeten invoeren.
De manier waarop deze waarden worden gedeclareerd, is met hetzelfde patroon als in marge of vulling steno, d.w.z. u kunt ook de boven- en onderkant in de eerste waarde instellen, dan rechts en links in de tweede, of u kunt één waarde instellen om op alle vier de waarden toe te passen..
Lees meer over postcss-positie op: https://github.com/seaneking/postcss-position
Stel in één keer breedte en hoogte in
De postcss-size plug-in van Andrey Sitnik laat je de vaak gebruikte crunch gebruiken breedte en hoogte eigenschappen naar beneden in een enkele grootte eigendom. Je kunt het op twee manieren gebruiken: twee waarden doorgeven met de eerste evaluatie naar de breedte en de tweede naar de hoogte, of een waarde doorgeven die wordt gebruikt voor zowel de breedte als de hoogte.
Test dit uit door de volgende CSS toe te voegen aan uw "src / style.css" bestand:
.size_a size: 1rem 2rem; .size_b size: 1rem;
Bij het compileren zou je deze code nu in je "dest / style.css" bestand moeten zien:
Lees meer over postcss-size op: https://github.com/postcss/postcss-size
Verticale en horizontale afstand instellen
Als een groot liefhebber van efficiënte codering, toen ik marges en opvulling schreef, die vaak aan twee kanten gelijk zijn, heb ik vaak gemerkt dat er een kortere weg was om de verticale en horizontale afstand in één keer te verklaren. Ik heb zelfs een paar preprocessor-mixins geschreven om precies dat te doen. Maar ik zal die mixins niet meer nodig hebben dankzij de postcss-verthorz plugin van David Hemphill.
Met deze plug-in kunt u gebruiken padding-vert of margin-vert om de verticale afstand in te stellen, en padding-horz of margin-horz om de horizontale afstand in te stellen. Voeg de volgende voorbeeldcode toe aan uw "src / style.css" -bestand om dit te zien werken:
.spacing padding-vert: 1rem; margin-horz: 2rem;
Na het compileren ziet u dat deze regels zijn uitgebreid naar volledige opvulling en margeverapporten.
Je kunt deze eigenschappen ook nog verder verkorten door ze af te korten op twee letters. De voorbeeldcode die we hierboven gebruikten zou als volgt kunnen worden afgekort en de uitvoer zou exact hetzelfde zijn:
.spacing_short pv: 1rem; mh: 2rem;
Lees meer over postcss-verthorz op: https://github.com/davidhemphill/postcss-verthorz
Output kleurcodes
Mijn favoriete standaardtekstkleur is # 232323 en ik weet niet of ik het ben, maar ik ben het beu om diezelfde twee cijfers keer op keer te kloppen. Ik wenste vaak dat er een kortere weg was, vergelijkbaar met de manier waarop je kunt trimmen #ffffff naar beneden #fff. Met de postcss-kleur-korte plugin van Andrey Polischuk is dat zo.
Wanneer u deze plug-in gebruikt, worden deze cijfers herhaald als u een tweecijferige kleurcode instelt totdat een zescijferige code wordt gemaakt, bijvoorbeeld. # 23 zal worden # 232323. Als u een ééncijferige kleurcode instelt, wordt deze herhaald tot er drie cijfers zijn, bijvoorbeeld. #f zal worden #fff. Je kunt het zelfs gebruiken om in te stellen RGBA () kleuren, waarbij het eerste cijfer dat u passeert drie keer wordt herhaald en de tweede wordt gebruikt als de alpha-waarde, bijvoorbeeld. rgba (0, 0.5) zal worden rgba (0, 0, 0, 0,5).
Voeg het volgende toe aan uw "src / style.css" -bestand om al het bovenstaande uit te proberen:
Lees meer over postcss-color-short op: https://github.com/andrepolischuk/postcss-color-short
Opsommen
Laten we snel alles samenvatten wat we in deze tutorial hebben meegemaakt:
Kleine alledaagse codeeropdrachten lijken niet zozeer individueel, maar ze tellen in de regel enorm veel tijd op, dus het kan de moeite waard zijn om ze kort te houden
Met de plug-in postcss-alias kunt u uw eigen steno voor eigenschappen maken
De postcss-crip-plug-in heeft honderden voorgedefinieerde eigenschapshortands
Met de postcss-font-magician kunt u aangepaste lettertypen gebruiken alsof het standaardlettertypen zijn, automatisch genereren @ Font-face code voor jou
De postcss-circle en postcss-driehoek plug-ins maken het maken van CSS-cirkels en -driehoeken rechttoe rechtaan en intuïtief
Met de plugin postcss-all-link-colours kunt u kleuren voor al uw linkstatussen tegelijk uitvoeren
De postcss-center plug-in biedt verticale en horizontale centrering met midden boven; en links: midden;
Met de postcss-clearfix-plugin kunt u clearfix-code uitvoeren met duidelijk: fix;
Met de postcss-positie plug-in kunt u uw top, rechts, bodem en links instellingen als onderdeel van uw gebruik van de positie eigendom
Met de plug-in postcss-size kun je in één keer de breedte en hoogte instellen
Met de plug-in postcss-verthorz kunnen horizontale spaties en verticale spaties worden uitgevoerd met afzonderlijke regels.
De postcss-kleur-korte plug-in geeft je de mogelijkheid om een- en tweecijferige hexcodes en andere kleursneltoetsen te gebruiken.
In de volgende zelfstudie
In de volgende tutorial gaan we over op plug-ins die geweldig zijn, maar vallen gewoon niet in een bepaalde categorie. Ik zie je binnenkort in "Diversen Goodies".
Share
Accentsconagua
