Share
Welkom bij de "PostCSS Deep Dive: QuickStart Guide". Gedurende deze eerste berichten van onze serie gaan we kijken hoe we u op de snelste, meest efficiënte manieren mogelijk kunnen maken met PostCSS.
In deze zelfstudie beginnen we met directe instellingsopties, zodat u binnen enkele minuten met PostCSS kunt werken. Op dit moment hebben we twee directe setup-opties: CodePen en Prepros.
Laten we eens kijken hoe je ze allebei kunt gebruiken om meteen met PostCSS te beginnen spelen.
Als u nog niet bekend bent met PostCSS, is de snelste manier om het te gebruiken via CodePen.
CodePen heeft nu pre-geïntegreerde ondersteuning voor PostCSS, samen met de volgende plug-ins en packs:
Deze selectie van plug-ins geeft u ondersteuning voor toekomstige syntaxis, Sass-achtige functionaliteit, commentaarstrippen en de mogelijkheid om transformatiescript te schrijven in steno.
Begin door naar CodePen te gaan en een nieuwe pen te maken. Klik vervolgens op het kleine tandwielpictogram linksboven in het CSS-venster om het instellingenpaneel te openen.
In de vervolgkeuzelijst met het label CSS Preprocessor selecteer de PostCSS keuze. U kunt ook het keuzerondje controleren Autoprefixer om die plug-in te hebben.
Nadat u deze selectie hebt gemaakt, ziet u nu een kleine zwarte knop onder het vervolgkeuzemenu Heb een add-on nodig?. Klik op die knop en een paneel zal openen met een lijst van @ reglement. Kopieer en plak een van deze @ regels in uw CSS-venster om de overeenkomstige PostCSS-plug-in te gebruiken.
Laten we een voorbeeld bekijken van hoe we de beschikbare PostCSS-plug-ins kunnen gebruiken met CodePen, te beginnen met de cssnext pak.
Voeg aan de bovenkant van het CSS-paneel deze code toe om aan te geven dat u cssnext wilt gebruiken:
@use cssnext;
Met deze regel kan je nu alle functionaliteit gebruiken die wordt beschreven op http://cssnext.io/features. We gaan de CSS-variabel- en kleurfuncties gebruiken om een kleur in te stellen op de achtergrond van het lichaam.
Eerst hebben we een :wortel sectie en definieer een CSS-variabele erin. Voeg dit toe aan je CSS-panel:
: root --body_bg_color: zwart;
Nu kunnen we die variabele in onze CSS gebruiken door onderstaande code toe te voegen:
body background: var (- body_bg_color);
Op dit punt had je zojuist de achtergrond van je pen zwart zien worden. U kunt ook op de klikken Bekijk gecompileerd knop aan de bovenkant van uw CSS-paneel om de gegenereerde code te zien:
"View Compiled" toont code na verwerking met PostCSSLaten we nu zeggen dat we dat harde zwart een beetje vinden om te steunen op een ontwerp waaraan we werken en we willen het een beetje verlichten. Om de kleur aan te passen, kunnen we de toekomstige syntaxis die kleurwijziging mogelijk maakt.
Op de regel die de --body_bg_color variabele, verander de waarde van zwart naar:
--body_bg_color: kleur (zwarte lichtheid (20%));
Deze kleurfunctie verlicht de zwarte kleur met 20%. U zou nu moeten zien dat de achtergrond van uw pen is veranderd in een donkergrijs.
Alle ondersteunde plug-ins kunnen op dezelfde manier op CodePen worden gebruikt:
Accentsconagua
@ regel voor de plug-in die u wilt gebruikenHier is de (visueel onopvallende) demo die we zojuist hebben gemaakt:
Prepros heeft mogelijk niet het bereik van plugin-ondersteuning dat CodePen heeft, maar het omvat een naadloze activering van beide Autoprefixer en cssnext. Prepros kan worden gedownload van https://prepros.io.
Als u aan de slag wilt gaan, sleept u een project dat een CSS-bestand bevat naar de interface. Klik vervolgens op de naam van het CSS-bestand om een paneel met instellingen aan de rechterkant te openen. Vanaf hier kunt u de vakjes aanvinken met het label AutoPrefix CSS om Autoprefixer in te schakelen, en Schakel Cssnext in om cssnext te gebruiken:
U kunt nu alle functies van het pakket cssnext-plug-ins gebruiken en uw CSS automatisch opnieuw gerefixeerd laten maken.
Oké, laten we snel samenvatten wat we hierboven hebben besproken:
@ regels om specifieke plug-ins in te schakelenCodePen en Prepros zijn twee geweldige manieren om vrijwel meteen aan de slag te gaan met PostCSS. Het nadeel is echter dat je niet kunt beslissen welke plug-ins je moet gebruiken.
Wanneer u klaar bent om gebruik te maken van de volledige kracht van PostCSS, moet u uw eigen selectie van plug-ins kiezen en configureren. Waarschijnlijk de meest toegankelijke manier om dit te doen is door het opzetten van aangepaste PostCSS-projecten via taaklopers zoals Gulp of Grunt.
In de volgende twee tutorials leer je hoe je dat moet aanpakken, "Snelstartgids: Gulp instellen" en "Snelstartgids: Gegarandeerd instellen".
