Share
In de vorige tutorial hebben we het gebruik van het uitstekende preprocessing-pack "PreCSS" besproken. In deze tutorial benaderen we PostCSS-gebaseerde voorverwerking op een andere manier; een zorgvuldig geselecteerde selectie van plug-ins installeren om onze preprocessor vanaf de grond af aan te bouwen.
Ik ga je meenemen door de opstelling van wat ik persoonlijk vind een geweldige mix van taalextensie plug-ins. Maar als het aankomt op het rollen van je eigen preprocessor, zou je ervoor kunnen kiezen om slechts enkele van de plug-ins te gebruiken die we hier behandelen, of je kunt helemaal geen plug-ins kiezen, in plaats van met andere opties.
Dat is de schoonheid van dit proces; u kunt uw preprocessor-installatie laten kiezen, ongeacht uw keuze. Het doel van deze zelfstudie is om u ervaring te laten opdoen met het samenstellen van een PostCSS-preprocessor en om u in te lichten over de functies van de momenteel beschikbare plug-ins, zodat u zelf kunt bepalen welke u wilt gebruiken.
Laten we beginnen!
Het eerste dat u moet doen, is uw project instellen om Gulp of Grunt te gebruiken, afhankelijk van uw voorkeur. Als je nog geen voorkeur hebt voor een van de twee, raad ik Gulp aan, omdat je minder code nodig hebt om dezelfde doelen te bereiken.
U kunt lezen over het instellen van Gulp- of Grunt-projecten voor PostCSS in de vorige zelfstudies
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 naar de map gericht npm installeren.
Deze tutorial gaat ervan uit dat je de vorige items in de serie hebt gevolgd en bent nu bekend met het installeren van een plug-in in je project en laad hem via je Gulpfile of Gruntfile.
Belangrijk! Als we doorgaan, moet u de plug-ins in uw Gulpfile / Grunt-bestand laden in de volgorde die u in deze zelfstudie ziet; laadvolgorde is belangrijk in PostCSS om alles soepel te laten verlopen.
De allereerste plaats waar we beginnen met het samenstellen van onze aangepaste preprocessor is import. U hebt PostCSS al inlining van @importeren stylesheets in de vorige tutorials Voor verkleining en optimalisatie en Preprocessing met PreCSS. De manier waarop invoer zal worden gebruikt in deze preprocessor is niet anders.
We hebben zojuist het feit aangeroerd dat laadopdracht belangrijk is in PostCSS, en hier vinden we het eerste voorbeeld hiervan. We willen iedereen verzekeren @importeren bestanden zijn inline gestructureerd als de allereerste stap, zodat we alle code van ons project op één plaats hebben zodat de rest van onze plug-ins kunnen werken.
We kunnen bijvoorbeeld al onze variabelen opslaan in een gedeeltelijk bestand en gebruiken @importeren om dat deel in ons hoofd stylesheet te brengen. Als we de plug-in die inline is niet hebben uitgevoerd @importeren bestanden eerst, onze variabelen zouden niet worden geïmporteerd en zouden daarom niet beschikbaar zijn voor de rest van onze verwerking om mee te werken.
Omdat we beginnen met het importeren van partials, willen we een beetje aanpassen aan onze Gulpfile voordat we onze importfunctionaliteit toevoegen.
Notitie: als u Grunt gebruikt, hoeft u in dit stadium geen wijzigingen aan te brengen.
Op dit moment hebben we een ".css" -bestand gevonden in de map "src", maar we willen niet per ongeluk gedeeltelijke bestanden compileren. We zullen alles in ons "style.css" -bestand importeren, dus het is de enige die moet worden gecompileerd.
Zoek deze regel:
Accentsconagua
return gulp.src ('./ src / *. css')... en verander het in:
return gulp.src ('./ src / style.css')Dit is dezelfde plug-in die we in de zelfstudie "Voor verkleining en optimalisatie" hebben gebruikt en die ook in PreCSS wordt gebruikt, dus je zult er op dit moment enigszins vertrouwd mee zijn.
Installeer de plug-in in uw project en maak vervolgens in uw "src" -map een bestand aan met de naam "_vars.css" en voeg er een eenvoudige testcode aan toe. Merk op dat we nog geen variabelen-functionaliteit hebben toegevoegd, dus slechts een paar rechte CSS, bijvoorbeeld:
.test achtergrond: zwart;
Importeer nu je nieuwe variabelenbestand in je hoofdbestand "src / style.css" door deze code toe te voegen aan de eerste regel:
@import "_vars";
Stel uw code samen en controleer vervolgens uw "dest / style.css" -bestand en u zou moeten zien dat het nu de code van uw "_vars.css" -bestand bevat.
Notitie: deze plugin moet worden uitgevoerd vóór de postcss-genest en postcss-simple-vars-plug-ins, die we allebei zullen gebruiken.
Ga je gang en installeer postcss-mixins, en voeg dan de volgende code toe aan je "src / style.css" bestand:
@ define-mixin icon $ netwerk, $ kleur .button. $ (netwerk) background-image: url ('img / $ (network) .png'); achtergrondkleur: $ kleur; @mixin pictogram twitter, blauw;Na het compileren zou uw "dest / style.css" de volgende gecompileerde code moeten hebben:
.button.twitter background-image: url ('img / twitter.png'); achtergrondkleur: blauw; De postcss-mixins-plug-in die we hier gebruiken is dezelfde als die wordt gebruikt in PreCSS. We hebben het uitgelegd in de tutorial over PreCSS, dus voor meer informatie over de syntaxis bekijk je de "Mixins" sectie van de vorige tutorial.
Als je liever de Sass-syntax gebruikt bij het maken van mixins, bekijk dan de postcss-sassy-mixins-plug-in van Andy Jansson, die op dezelfde manier werkt als postcss-mixins maar met de syntaxis @mixin om een mixin te definiëren, en @include om er een te gebruiken.
Notitie: de postcss-for-plugin is een andere moet worden uitgevoerd vóór postcss-genest en postcss-simple-vars.
Installeer de postcss-for plugin en test of deze naar verwachting werkt door deze code toe te voegen aan uw "src / style.css" -bestand:
@voor $ i van 1 tot 3 p: nth-of-type ($ i) margin-left: calc (100% / $ i);
Het zou moeten compileren om u te geven:
p: n-of-type (1) margin-left: calc (100% / 1); p: nth-of-type (2) margin-left: calc (100% / 2); p: nth-of-type (3) margin-left: calc (100% / 3);
Nogmaals, de plug-in die we gebruiken om toe te voegen @voor loops is hetzelfde als wordt gebruikt in PreCSS, dus voor extra informatie over de syntaxis, bekijk de "Loops" sectie in de vorige tutorial.
De postcss-for-plugin moet worden uitgevoerd vóór postcss-simple-vars, wat betekent dat er geen manier is om variabelen te gebruiken om het bereik in te stellen dat u wilt @voor lus om door te herhalen.
Als dit een probleem is, kunt u in plaats daarvan deze vork van de postcss-for-plugin gebruiken die in plaats daarvan moet worden geladen na de postcss-simple-vars-plug-ins.
Omdat het wordt uitgevoerd nadat variabelen zijn geëvalueerd, kunt u variabelen gebruiken om het bereik in te stellen dat u wilt @voor lus om doorheen te herhalen, zoals dit:
@vanaf 1; @count: 3; @voor $ i van @from to @count p: nth-of-type ($ i) margin-left: calc (100% / $ i);
We zullen twee soorten variabelen aan onze preprocessor toevoegen, die beide erg handig kunnen zijn. De eerste soort gebruikt Sass-achtige syntaxis en de tweede gebruikt de syntaxis van aangepaste CSS-eigenschappen, ook wel bekend als CSS-variabelen.
Installeer deze twee plug-ins, dan testen we ze allemaal tegelijk.
Eerst testen we de Sass-achtige syntaxis van postcss-simple-vars. Open het "_vars.css" bestand dat je eerder hebt gemaakt, verwijder de inhoud en voeg de volgende code toe:
$ default_padding: 1rem;
Voeg het volgende toe aan uw "src / style.css" bestand en hercompileer:
.post padding: $ default_padding;
Het zou moeten compileren om u te geven:
.post padding: 1rem;
Nu testen we de aangepaste CSS-eigenschappen, zoals de syntaxis van postcss-css-variabelen. Voeg de volgende code toe aan uw "src / style.css" bestand:
: root --h1_font_size: 3rem; h1 font-size: var (- h1_font_size); @media (max-width: 75rem) h1 --h1_font_size: 4vw;
Het moet compileren in:
h1 font-size: 3rem; @media (max-width: 75rem) h1 font-size: 4vw;
Merk op dat bij het gebruik van CSS-variabelen we alleen de waarde van de --h1_font_size variabele in de mediaquery en deze automatisch de bijbehorende uitvoert lettertypegrootte eigendom. Dit is bijzonder nuttige functionaliteit.
Voordat ik verder ga, zal ik nog maar kort vermelden dat de aanpak in deze tutorial niet de benadering is die u volgt hebben nemen. Als je de ene soort variabele wilt gebruiken en niet de andere, dan is dat helemaal goed.
Vanuit mijn perspectief, de reden dat ik graag beide soorten variabelen gebruik, gebruik ik ze op twee verschillende manieren. Ik gebruik meestal de syntaxis van CSS-aangepaste eigenschappen in mijn hoofdstijlblad, terwijl ik Sass-achtige variabelen in mijn gedeeltelijke bestanden gebruik.
Hiermee kan ik aangepaste CSS-eigenschappen instellen voor het type variabelen dat ik in een live project zou kunnen gebruiken als / of ze goed worden ondersteund in browsers. Zoals je in het bovenstaande voorbeeld hebt gezien, hebben ze ook bepaalde functionaliteit die Sass-achtige variabelen niet hebben.
Ondertussen kan ik Sass-achtige variabelen gebruiken voor dingen die niet in een live stylesheet thuishoren, vooral die die puur zijn om verwerkt te worden door dingen als elke loops, conditionals en andere transformaties.
Als een alternatief voor het gebruik van postcss-simple-vars, zou je misschien willen overwegen om postcss-advanced-variabelen te gebruiken, de plug-in die wordt gebruikt als onderdeel van het PreCSS-pakket.
Dit is ook een uitstekende optie, met als belangrijkste verschil dat het conditionals, loops en variabelen allemaal in dezelfde plug-in verwerkt. Voor mij is de reden dat ik momenteel postcss-simple-vars kies, dat ik de voorkeur geef aan conditionals die afkomstig zijn van een afzonderlijke plug-in; postcss-conditionals die we binnenkort behandelen.
In plaats van postcss-css-variabelen te gebruiken, geeft u misschien de voorkeur aan postcss-custom-properties.
Het essentiële verschil tussen de twee is postcss-custom-properties voldoet strikt aan de W3C-specificatie voor aangepaste eigenschappen, zodat u erop kunt vertrouwen dat u alleen de juiste toekomstige CSS schrijft. Anderzijds biedt postcss-css-variabelen extra functionaliteit, maar daarmee wordt niet beweerd volledige pariteit te hebben met spec.
Ik kies persoonlijk voor postcss-css-variabelen omdat ik het gebruik in de context van preprocessing, waar ik toch veel niet-spec-code schrijf. Als zodanig heb ik liever de toegevoegde functionaliteit voor meer dan 100% naleving van specificaties.
Als u echter variabelen gebruikt in de context van het schrijven van toekomstige CSS, vindt u mogelijk dat postcss-custom-properties beter bij u passen.
Installeer de postcss-elke plugin en voeg deze variabele code toe aan uw "_vars.css" bestand:
$ sociaal: twitter, facebook, youtube;
Deze code definieert een lijst, opgeslagen in de $ sociale veranderlijk.
Nu gaan we een maken @elk lus om de waarden te herhalen die zijn opgeslagen in onze $ sociale variabel. Voeg deze code toe aan uw "src / style.css" bestand:
@each $ icon in ($ social) .icon - $ (icon) background: url ('img / $ (icon) .png'); Onze @elk lus is nu klaar, maar voordat we het kunnen compileren, moeten we een kleine wijziging in de configuratie aanbrengen in de opties van postcss-simple-vars.
Dat merk je in de bovenstaande code die we gebruiken $ icon om de huidige waarde weer te geven waar we doorheen janken. Hieruit kan enige moeilijkheid voortvloeien, omdat de postcss-simple-vars plug-in zoekt naar de $ teken om variabelen te identificeren.
Dit betekent dat het zal zien $ icon, denk dat het een variabele is, probeer het te verwerken en zie dat het geen waarde heeft. Dat zorgt ervoor dat het stopt met het compileren en loggen van een fout in de console dat er een ongedefinieerde variabele is ontdekt.
Om dit op te lossen, willen we de optie toevoegen stil: waar naar onze opties voor de plug-in. Dit betekent dat als het een ongedefinieerde variabele ontdekt, het niet stopt met compileren om een fout te loggen, het gaat gewoon door. Daarom zal het niet worden gehinderd door de aanwezigheid $ icon in onze @elk loop en kunnen we met succes compileren.
Stel in de array processors van uw Gulpfile of Gruntfile de optie in:
/ * Gulpfile * / simple_vars (silent: true) / * Gruntfile * / require ('postcss-simple-vars') (silent: true)Compileer nu uw CSS en u zou moeten krijgen:
.icon-twitter background: url ('img / twitter.png'); .icon-facebook background: url ('img / facebook.png'); .icon-youtube background: url ('img / youtube.png'); Zoals eerder vermeld, is postcss-advanced-variables een andere uitstekende plugin-optie die variabelen, loops en conditionals allemaal in één verwerkt.
Ik heb eerder al gezegd dat deze plugin mijn voorkeur heeft voor conditionals. Dit komt omdat ik heb ontdekt dat het in staat is om complexere voorwaardelijke controles aan te kunnen. Het omvat ondersteuning voor @else if syntaxis, wat betekent dat je kunt testen tegen meer voorwaarden in een enkel stuk code.
Na het installeren van de plug-in postcss-conditionals, test u deze door deze code toe te voegen aan uw "src / style.css" -bestand:
$ column_count: 3; .column @if $ column_count == 3 width: 33%; zweven: links; @else if $ column_count == 2 width: 50%; zweven: links; @else width: 100%;
Deze code controleert de waarde die we in de variabele hebben ingesteld @column_count en zullen verschillende breedte- en zwevende waarden uitvoeren afhankelijk van wat het vindt. Het werkt op dezelfde manier als de code die we in de vorige voorbewerkingstool hebben gebruikt, maar nu we de mogelijkheid hebben om te gebruiken @else if We hebben het aantal voorwaarden dat we testen kunnen vergroten van twee naar drie.
Na het hercompileren zou dit je het volgende moeten geven:
.kolom breedte: 33%; zweven: links
Probeer veranderend $ COLUMN_COUNT naar 2 of 1 en opnieuw compileren om te zien hoe het de CSS-uitvoer verandert.
We kunnen dit soort conditionals ook goed in mixins gebruiken, waarvoor we eerder ondersteuning hebben toegevoegd. We kunnen bijvoorbeeld een mixin maken om kolomlay-outcode te genereren, zoals:
@ define-mixin kolommen $ count @if $ count == 3 width: 33%; zweven: links; @else als $ count == 2 width: 50%; zweven: links; @else width: 100%; . another_column @mixin columns 2;
Dit geeft je de output:
.een andere kolom breedte: 50%; zweven: links;
Zoals eerder vermeld, is postcss-advanced-variables een andere uitstekende plugin-optie die variabelen, loops en conditionals allemaal in één verwerkt.
In een eerdere tutorial gebruikten we postcss-calc, via cssnano, om instanties van te maken calc () gebruik efficiënter. In de context van preprocessing kan het echter erg handig zijn wanneer we wiskunde willen gebruiken in onze stylesheets.
Ga je gang en installeer postcss-calc, dan gaan we het testen door de kolomgeneratiemixin toe te voegen die we hierboven efficiënter hebben toegevoegd.
Op dit moment gebruiken we conditionals om te controleren of de mixins zijn $ count argument is ingesteld op een van beide 1, 2 of 3 vervolgens een overeenkomstige vooraf berekende breedte uitvoeren. In plaats daarvan zullen we gebruiken calc () om automatisch de juiste breedte voor onze kolomcode uit te voeren, ongeacht welk nummer door de mixin wordt doorgegeven.
Voeg toe aan je "src / style.css" bestand:
@ define-mixin columns_calc $ count width: calc (100% / $ count); @if $ count> 1 float: left; .column_calculated @mixin columns_calc 2;
In plaats van het coderen van de percentagebreedten die we voor bepaalde aantallen kolommen nodig hebben, berekenen we het nu on the fly.
De postcss-calc-plug-in wordt geconverteerd breedte: calc (100% / $ count); in een statische hoeveelheid, afhankelijk van de waarde die wordt doorgegeven wanneer we de mixin bellen, in dit geval 2.
Hercompileer je code en je zou deze uitvoer moeten zien:
.column_calculated width: 50%; zweven: links;
Notitie: Waar postcss-calc kan worden opgelost calc () tot een statische waarde zal het het in uw code uitvoeren. Als het dat niet kan, zal het niets veranderen, zodat je het nog steeds kunt gebruiken calc () voor waarden die tijdens runtime door de browser moeten worden afgehandeld.
Voor het nesten gebruiken we dezelfde plug-in als die wordt gebruikt in het PreCSS-pakket, dus u kunt teruggaan naar de vorige zelfstudie voor volledige informatie over syntaxis.
Installeer postcss-genest en test vervolgens of alles naar behoren werkt door deze code te compileren:
.menu breedte: 100%; een text-decoration: none;
Uw resulterende CSS moet zijn:
.menu breedte: 100%; .menu a text-decoration: none;
Voor uitbreidingen gebruiken we de plug-in postcss-sass-extend. Het geeft ons verschillende syntaxis om te gebruiken dan dat we hebben behandeld in onze vorige tutorial over werken met PreCSS. In plaats van uitgebreid te worden gedefinieerd met @ define-extend extend_name ... ze zijn gedefinieerd met % extend_name ....
Ze worden nog steeds gebruikt met de in wezen dezelfde syntaxis van @extend% extend_name;.
Merk op dat de postcss-sass-extend plug-in feitelijk wordt verzonden met PreCSS, maar ik neem aan dat deze niet standaard laadt als toen ik probeerde de vereiste syntaxis te gebruiken die niet was gecompileerd.
Na het installeren van postcss-sass-extend in uw project, test u het met de volgende code:
% rounded_button border-radius: 0.5rem; opvulling: 1em; grensbreedte: 0,0625rem; randstijl: stevig; .blue_button @extend% rounded_button; randkleur: # 2F74D1; achtergrondkleur: # 3B8EFF; .red_button @extend% rounded_button; randkleur: # C41A1E; achtergrondkleur: # FF2025;
Het moet compileren in:
.blue_button, .red_button border-radius: 0.5rem; opvulling: 1em; grensbreedte: 0,0625rem; randstijl: stevig; .blue_button border-colour: # 2F74D1; achtergrondkleur: # 3B8EFF; .red_button border-colour: # C41A1E; achtergrondkleur: # FF2025;
Tot nu toe hebben we gedekt wat zou kunnen worden beschouwd als de kernkenmerken die de meeste preprocessors gemeen hebben. Er zijn echter nog steeds meer plug-ins beschikbaar om extra functies te bieden; sommige van deze functies zijn te vinden in andere preprocessors en sommige moet je naar PostCSS gaan zoeken. We zullen deze extra opties nu kort bespreken.
De mogelijkheid om kleuren aan te passen, kan een van de handigste functies zijn die worden gevonden in preprocessors. Er zijn eigenlijk verschillende kleurenplug-ins voor PostCSS, maar dit zijn er drie die zich vooral thuis voelen in een voorbewerkingsconfiguratie. Ze maken verschillende kleurtransformaties mogelijk, zoals verlichten, verdonkeren, verzadigen, het toevoegen van alfawaarden en meer.
De functionaliteit van deze plug-in kan worden vergeleken met de naadloze mixins van Stylus, waarbij, in plaats van een syntaxis te gebruiken @mixin, je definieert stukjes code op een zodanige manier dat ze vervolgens op dezelfde manier in code kunnen worden gebruikt als een natieve eigenschap, bijv.
/ * Definieer een eigenschap * / formaat: $ size height: $ size; breedte: $ formaat; / * Gebruik het als een native-eigenschap * / .square size: 50px;
De plug-in kan ook worden gebruikt om native eigenschappen opnieuw te definiëren om aan uw behoeften te voldoen.
Opzoeken van eigendommen is een functie in Stylus die erg handig kan zijn. Hiermee kunt u de waarde van een eigenschap binnen dezelfde stijl opzoeken. U kunt bijvoorbeeld een rechtermarge instellen die overeenkomt met de linkerkant met: marge links: 20 px; margin-right: @ margin-left;
Terwijl het reguliere nestwerk dat we hierboven hebben behandeld, selectors uitpakt, worden de geneste eigenschappen van de plug-in postcss-nested-props uitgevouwen, bijvoorbeeld:
/ * Oorspronkelijke code * / .element border: width: 1px; stijl: vast; kleur: #ccc; / * Na verwerking * / .element border-width: 1px; randstijl: stevig; randkleur: #ccc;
Matching biedt u een andere manier om voorwaardelijke controles uit te voeren, dit keer met behulp van Rust-achtige patroon-matching, iets vergelijkbaars met switch-instructies in JavaScript of PHP. Dit kan u een efficiëntere manier bieden om meerdere voorwaarden te controleren dan veel schrijven @if anders checks.
CSS-sprite-generatie, een populaire functie in Compass, kan ook worden gedaan via de postcss-sprites-plug-in. De plug-in scant uw CSS voor afbeeldingen, combineert die afbeeldingen tot een sprite-sheet en werkt uw code bij indien nodig om correct weer te geven vanaf het nieuwe sprite-blad.
Er is momenteel een erg uitgebreide lijst met taalextensie plug-ins om uit te kiezen, meer dan we hier kunnen behandelen, dus bekijk de volledige lijst op: https://github.com/postcss/postcss#language-extensions
Voor veel mensen is de mogelijkheid om te schrijven in beknopte, efficiënte syntaxis (meestal zonder puntkomma's en accolades) een van de grote aantrekkingskracht van preprocessors zoals Stylus of Sass. De zojuist uitgebrachte versie 5.0 van PostCSS ondersteunt nu aangepaste parsers waarmee nieuwe syntaxes kunnen worden ondersteund. SugarSS moet de bondige syntaxisparser zijn en discussies zijn momenteel open over hoe deze syntaxis zal worden gestructureerd.
PostCSS is nog relatief nieuw en u zult merken dat u iets wilt bereiken met uw aangepaste preprocessor waarvoor momenteel geen plug-in beschikbaar is. Het mooie van dit modulaire ecosysteem is dat je de mogelijkheid hebt om dat probleem zelf op te lossen door je eigen plug-in te maken. Iedereen kan het doen en de toegangsdrempel is veel lager dan wanneer u probeert uw eigen functionaliteit toe te voegen aan Stylus, Sass of LESS. We zullen leren hoe in een later zelfstudie.
U hoeft niet te kiezen tussen PreCSS en uw eigen preprocessor te rollen als u PostCSS wilt gebruiken. U kunt zelfs volledig kiezen voor een PostCSS-gebaseerde voorbewerking als u daarvoor kiest, maar in plaats daarvan naast uw favoriete preprocessor gebruiken.
In de volgende zelfstudie zullen we leren hoe u PostCSS kunt gebruiken in combinatie met Stylus, Sass of LESS. Zie je daar!
