Share
In de laatste twee tutorials hebben we gekeken naar manieren om PreCSS te gebruiken op voltooide stylesheets om hun compatibiliteit en optimalisatie tussen browsers te verbeteren, hoofdzakelijk als een post-processor. In deze zelfstudie leert u PostCSS gebruiken als een pre-processor, op dezelfde manier waarop u Stylus, Sass of LESS zou gebruiken.
Er zijn twee manieren waarop u PostCSS kunt gebruiken voor voorverwerking. Een daarvan is om al je eigen plug-ins te selecteren om de preprocessor-functionaliteit toe te voegen die je wilt, en de andere is om een pakket van vooraf geselecteerde plug-ins te installeren, zodat je meteen klaar bent om te gaan.
We beginnen met de snelste en eenvoudigste aanpak, het installeren van het uitstekende PreCSS-pack met plug-ins, gemaakt door Jonathan Neal. In de tutorial hierna gaan we in op hoe u uw eigen preprocessor kunt samenstellen, met alleen de functionaliteit die u wilt.
Deze tutorial gaat ervan uit dat je enige bekendheid hebt met de functies die je vaak tegenkomt in preprocessors zoals Stylus, Sass of LESS. Dat is puur omdat we ons zullen concentreren op hoe u kunt dezelfde functies gebruiken via PostCSS in plaats van wat de functies doen het echt. Dat gezegd hebbende, zelfs als je nog nooit een preprocessor hebt gebruikt, is dit misschien de perfecte plek om te beginnen.
We zullen in de volgende sectie bekijken hoe je een Gulp- of Grunt-project opzet met behulp van PreCSS. Als je echter een kortere weg wilt nemen, (net voor nu), kun je ook de live demo-speelplaats gebruiken om de code uit te proberen. we zullen in deze tutorial doornemen. De code kan in het linkervenster worden getypt en deze wordt automatisch voor u gecompileerd en in het rechtervenster weergegeven.
PreCSS Live Editor: https://jonathantneal.github.io/precssHet 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 gerichtnpm installeren.
Of u Gulp of Grunt gebruikt, installeer PreCSS in uw project met de volgende opdracht:
npm install precss --save-dev
Als u Gulp gebruikt, voegt u deze variabele toe onder de variabelen die al in het bestand staan:
Accentsconagua
var precss = require ('precss');Voeg nu de nieuwe variabelenaam toe aan uw processors array:
var processors = [precss];
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.
Als u Grunt gebruikt, werk dan het processors object, dat is genest onder de opties object, naar het volgende:
processors: [require ('precss') ()]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.
U hebt nu alles wat u nodig hebt om PreCSS te installeren en klaar te maken. Dit betekent dat we klaar zijn om door enkele van de pre-processingmogelijkheden van PreCSS te gaan en hoe ze kunnen worden gebruikt.
Over het algemeen is de PreCSS-syntaxis het meest vergelijkbaar met die van Sass. Het maakt echter gebruik van een aantal van zijn eigen unieke benaderingen, die we zullen behandelen als we verder gaan.
Notitie: vanwege de Sass-achtige syntaxis van PreCSS, zult u merken dat een Sass-syntaxis-markeerstift het beste werkt voor u in uw favoriete teksteditor.
Nesten is iets dat gebruikelijk is voor alle drie de grote preprocessors, d.w.z. Stylus, Sass en LESS, en het is ook aanwezig in PreCSS. Nesten in PreCSS gebeurt op dezelfde manier als in Sass en LESS, door selectors in de accolades van andere kiezers te plaatsen.
Het vermogen om de & symbool om de bovenliggende selector in de onderliggende selector te laten dupliceren werkt ook op dezelfde manier in PreCSS als in andere preprocessors.
Probeer de volgende geneste code toe te voegen aan uw "src / style.css" -bestand:
.menu breedte: 100%; een text-decoration: none; & :: vóór content: ";
Compileer uw CSS met slok css of grunt postcss en je "dest / style.css" -bestand zou de geneste code als volgt moeten hebben geëvalueerd:
.menu breedte: 100%; .menu a text-decoration: none; .menu :: before content: ";
Variabelen zijn een ander type functionaliteit dat alle preprocessors gemeen hebben en ze zijn opgenomen in PreCSS. Het enige dat typisch verschilt tussen elke preprocessor is de syntaxis om variabelen aan te duiden.
@ symbool en plaats een : voor de waarde. $ symbool en plaats een = teken voor de waarde. $ symbool en plaats een : voor de waarde.In overeenstemming met de PreCSS-tendens om Sass-achtige syntaxis te gebruiken, plaatst het ook een $ vóór de variabelenaam en a : voor de waarde.
Probeer PreCSS-variabelen te gebruiken door dit aan uw "src / style.css" -bestand toe te voegen:
$ text_color: # 232323; body kleur: $ text_color;
Na het opnieuw compileren zou je deze resulterende code moeten zien:
body color: # 232323;
Voorwaardelijke voorwaarden, d.w.z.. als en anders logica, zijn een functie die erg sterk is in zowel Sass als Stylus. LESS biedt bewaakte mixins, maar ze bieden niet echt dezelfde kracht. Conditionals zijn aanwezig in PreCSS en volgen dezelfde syntaxis als Sass, met @als en @anders.
Voeg deze voorbeeldcode toe aan uw "src / style.css" -bestand:
$ column_layout: 2; .column @if $ column_layout == 2 width: 50%; zweven: links; @else width: 100%;
In het bovenstaande voorbeeld hebben we een .kolom klasse-uitvoer anders, afhankelijk van of we een lay-out met één kolom of een lay-out met twee kolommen willen. We hebben de $ column_layout variabele ingesteld op 2, wat betekent dat we zouden moeten zien breedte: 50%; zweven: links; uitvoer naar onze klas.
Compileer je bestand en je zou het volgende moeten zien in je "dest / style.css" bestand.
.kolom breedte: 50%; zweven: links
Notitie: de postcss-advanced-variables-plug-in die deze conditionals-functionaliteit biedt, is nog steeds vrij nieuw en ik heb een aantal onverwachte uitvoer tegengekomen bij gebruik voor complexere conditionals, maar ik weet zeker dat deze in de nabije toekomst zal worden bijgewerkt.
Er is een alternatieve plug-in die kan worden gebruikt voor conditionals met de naam postcss-conditionals. We bespreken hoe je die plug-in kunt gebruiken (als je dat wilt) in de volgende tutorial, "Rolling Your Pre Preprocessor".
@voor en @elk Er zijn twee soorten lussen beschikbaar in PreCSS, de @voor en @elk loops. Beide gebruiken een aanpak die lijkt op Sass. "Voor" loops kunt u door een numerieke teller lopen, terwijl u met "elke" loops door een lijst met items kunt bladeren.
@voor LoopsIn een @voor loop er is een "counter" -variabele die bijhoudt waarheen je fietst door je numerieke teller, meestal ingesteld als $ i. Bijvoorbeeld, bij itereren van 1 tot 3 zullen er drie lussen zijn; in de eerste $ i zal gelijk zijn 1, de tweede zal gelijk zijn 2 en de derde zal gelijk zijn 3.
Deze $ i de tellervariabele kan worden geïnterpoleerd in zowel selectors als regels, wat erg handig kan zijn voor zaken als genereren n-of-type () regels en berekeningsbreedten.
Voeg deze code toe aan uw "src / style.css" -bestand om a te proberen @voor lus:
@voor $ i van 1 tot 3 p: nth-of-type ($ i) margin-left: calc (100% / $ i);
Na het compileren zou je deze code moeten zien uit te breiden naar:
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);
Notitie: nummers 1, 2 en 3 zijn ingevoegd in elk van de bovenstaande stijlen.
@elk LoopsEen @elk loop doorloopt een lijst met items in plaats van nummers. Zoals met @voor loops, de variabele die het huidige item van de lus vertegenwoordigt, kan worden geïnterpoleerd naar selectors en regels. Houd er rekening mee dat u voor interpolatie in een tekenreeks een reeks haakjes in de naam van de variabele moet invoegen in het formaat $ (Var).
Geef gebruik van PreCSS @elk Loopt a go door de volgende voorbeeldcode toe te voegen:
$ sociaal: twitter, facebook, youtube; @each $ icon in ($ social) .icon - $ (icon) background: url ('img / $ (icon) .png'); Na het compileren zou de volgende CSS gegenereerd moeten zijn:
.icon-twitter background: url ('img / twitter.png'); .icon-facebook background: url ('img / facebook.png'); .icon-youtube background: url ('img / youtube.png'); De syntaxis voor het maken van mixen is een aspect van PreCSS dat een beetje verschilt van Sass.
In Sass gebruikt u de syntaxis om een mixin te definiëren @mixin mixin_name ($ arg1, $ arg2) ... en gebruik het dan met @include mixin_name (pass_arg1, pass_arg2);.
In PreCSS definieert u daarentegen een mixin met de syntaxis @ define-mixin mixin_name $ arg1, $ arg2 ... en gebruik het met @mixin mixin_name pass_arg1, pass_arg2;.
Voeg dit voorbeeld toe aan uw "src / style.css" bestand:
@ define-mixin icon $ netwerk, $ kleur .button. $ (netwerk) background-image: url ('img / $ (network) .png'); achtergrondkleur: $ kleur; @mixin pictogram twitter, blauw; @mixin icon youtube, rood;Bij het compileren zou je moeten zien:
.button.twitter background-image: url ('img / twitter.png'); achtergrondkleur: blauw; .button.youtube background-image: url ('img / youtube.png'); achtergrondkleur: rood; Notitie: argumenten die door de mixin worden doorgegeven kunnen worden geïnterpoleerd naar selectors en strings met dezelfde aanpak als vermeld in @elk lussen boven; met het formaat $ (Var).
Naast het gebruik van mixins op de manier zoals hierboven is weergegeven, kunnen ze ook worden ingesteld om blokken inhoud te verwerken die worden doorgegeven wanneer de mixin wordt gebeld. Dit is in wezen hetzelfde proces als met Sass ' @inhoud.
Wijzig bijvoorbeeld de mixin uit het bovenstaande voorbeeld, plaatsing @ Mixin-inhoud waar je wilt dat een doorgegeven blok met content wordt weergegeven, zoals:
@ define-mixin icon $ netwerk, $ kleur .button. $ (netwerk) background-image: url ('img / $ (network) .png'); achtergrondkleur: $ kleur; @ Mixin-inhoud; Wanneer een mixin incorporeert @ Mixin-inhoud wordt gebruikt, moet deze worden geplaatst met accolades, in plaats van op een enkele regel die eindigt op een ;, of het zal niet compileren.
Werk uw code bij, zodat uw mixin-oproepen er als volgt uitzien:
@mixin-pictogram twitter, blauw width: 3rem; @mixin pictogram youtube, rood width: 4rem;
Na compilatie zou dit de volgende code moeten opleveren - let op de opname van de breedte inhoud doorgegeven door elk gebruik van de mixin:
.button.twitter background-image: url ('img / twitter.png'); achtergrondkleur: blauw; breedte: 3rem; .button.youtube background-image: url ('img / youtube.png'); achtergrondkleur: rood; breedte: 4rem; Extends lijken in zekere zin op mixins, omdat ze zo zijn ontworpen dat je blokken code kunt hergebruiken. Het idee achter 'uitbreiden' is echter om een basisset code te maken waarvan je weet dat je deze meerdere keren op dezelfde manier zult gebruiken voor een bepaald type element. U kunt vervolgens op die basis uitbreiden met aanvullende, niet-standaardcode.
In PreCSS is de syntaxis om een verlenging te definiëren @ define-extend extend_name ....
Definieer in uw "src / style.css" -bestand een uitbreiding met de basisstijlen voor een afgeronde knop, zoals:
@ define-extend rounded_button border-radius: 0.5rem; opvulling: 1em; grensbreedte: 0,0625rem; randstijl: stevig;
Deze standaardset met stijlen kan nu worden uitgebreid met extra code, bijvoorbeeld door dingen in te stellen Achtergrond kleur en rand kleur. Dit wordt gedaan door de syntaxis te gebruiken @extend extend_name; om de basisstijlen te importeren die zijn gedefinieerd in de uitbreiding.
Voeg deze voorbeeldcode toe onder de code die u zojuist hebt toegevoegd:
.blue_button @extend rounded_button; randkleur: # 2F74D1; achtergrondkleur: # 3B8EFF; .red_button @extend rounded_button; randkleur: # C41A1E; achtergrondkleur: # FF2025;
Waar de @extend rounded_button; regel wordt gebruikt, wordt de volledige inhoud van de extensie ingevoegd.
Stel je stijlen samen en je zou moeten krijgen:
.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;
Merk ook op dat de stijlen die de .blue_button en .rode knop klas zijn gecombineerd voor efficiëntie.
De plug-in die wordt gebruikt voor het invoegen van stylesheets via @importeren is hetzelfde als in de vorige zelfstudie van deze serie: voor verkleining en optimalisatie. Voor een overzicht van hoe het werkt, kunt u lezen in het gedeelte getiteld "Inline / Combineer bestanden met @import".
In de context van het gebruik van PostCSS als een preprocessor, wordt invoer nog nuttiger, omdat ze u de mogelijkheid bieden partities in te stellen, iets dat u gewend bent van andere voorbewerkingsoplossingen. U kunt bijvoorbeeld een "partials" -map instellen, uw project scheiden in logisch afzonderlijke deelbestanden en ze vervolgens als volgt importeren:
@import "partials / _variables.css"; @import "partials / _utilities.css"; @import "partials / _mixins.css"; @import "partials / _extends.css";
Ik hoop dat je nu enig inzicht hebt in hoe krachtig PostCSS kan zijn als een preprocessor via het PreCSS-pakket. Om samen te vatten wat we hierboven behandelden:
@ define-mixin mixin_name $ arg1, $ arg2 ... @mixin mixin_name pass_arg1, pass_arg2; @ Mixin-inhoud kan op dezelfde manier worden gebruikt als Sass ' @inhoud @ define-extend extend_name ...@extend extend_name;@importeren inline externe CSS-bestanden, met name nuttig voor het gebruik van partialsPreCSS is een fantastisch project, dat enkele uitstekende taaluitbreidingsplugins samenbrengt en PostCSS-gebaseerde preprocessing vrijwel plug and play maakt. Het biedt bijna alle functies die de meeste preprocessiegebruikers zijn gaan verwachten, en is een snelle, "geen gedoe" manier om de PostCSS preprocessor-bal te laten rollen.
PreCSS gebruiken is een van de twee methoden van PostCSS-voorverwerking die we aan het begin van deze tutorial noemden. De andere methode is om je eigen preprocessor, handmatig de taaluitbreidingsplug-ins kiezen die bij uw eigen projecten of coderingsstijl passen. Het nadeel is dat het een beetje meer opzet is, maar in ruil daarvoor krijg je de vrijheid om een preprocessor samen te stellen die werkt zoals jij het wilt.
In de volgende tutorial leer je hoe je dit moet doen: "Roll Your Own Preprocessor".
