Share
Välkommen till "PostCSS Deep Dive: QuickStart Guide". Under dessa första inlägg i vår serie kommer vi att se på att komma igång med PostCSS på de snabbaste och mest effektiva sätten.
I den här handledningen kommer vi att börja med snabbinstallationsalternativ, så du kan arbeta med PostCSS på bara några minuter från nu. För närvarande har vi två alternativ för direktinstallation: CodePen och Prepros.
Låt oss se hur du kan använda dem båda för att börja spela med PostCSS direkt.
Om du är helt ny på PostCSS är det snabbaste sättet att börja använda det via CodePen.
CodePen har nu förintegrerat stöd för PostCSS, tillsammans med följande plugins och packs:
Det här urvalet av plugins ger dig stöd för framtida syntax, Sass-liknande funktionalitet, kommentarstrippning och förmågan att skriva transformationskod i stenografi.
Börja med att gå till CodePen och skapa en ny penna. Klicka sedan på den lilla kugghjulsikonet längst upp till vänster i CSS-fönstret för att öppna inställningspanelen.
Från rullgardinsmenyn märkt CSS Preprocessor Välj PostCSS alternativ. Du kan också kolla på radioknappen Autoprefixer att ha det plugin medföljer.
Efter det här valet bör du nu se en liten svart knapp under rullgardinsmenyn Behöver ett tillägg?. Klicka på den knappen och en panel öppnas och visar en lista över @ regler. Kopiera och klistra in någon av dessa @ reglerar sig i din CSS-panel för att börja använda motsvarande PostCSS-plugin.
Låt oss se ett exempel på hur vi kan använda de tillgängliga PostCSS-pluginsna med CodePen, från och med cssnext packa.
Överst på CSS-panelen lägger du till den här koden för att ange att du vill använda cssnext:
@use cssnext;
Med denna linje på plats kan du nu använda alla funktioner som beskrivs på http://cssnext.io/features. Vi ska använda CSS-variabeln och färgfunktionerna för att ställa in en färg på kroppsbakgrunden.
Först ställer vi upp en :rot avsnitt och definiera en CSS-variabel i den. Lägg till detta på din CSS-panel:
: root --body_bg_color: black;
Nu kan vi använda den variabeln i vår CSS genom att lägga till den här koden nedan:
kropp bakgrund: var (- body_bg_color);
Vid denna tidpunkt borde du just sett bakgrunden på din penna svarta. Du kan också klicka på Visa kompilerade knappen längst upp på din CSS-panel för att se koden som har genererats:
"Visa kompilerade" visar kod efter bearbetning med PostCSSLåt oss nu säga att vi finner det svarta svarta lite för starkt för en design vi jobbar med och vi vill lätta på det lite. För att justera färgen kan vi använda framtida syntax som tillåter färg modifiering.
På linjen som deklarerar --body_bg_color variabel, ändra värdet från svart till:
--body_bg_color: färg (svart ljushet (20%));
Denna färgfunktion tänds den svarta färgen med 20%. Du borde nu se att din penis bakgrund har ändrats till en mörkgrå.
Några av de plugin som stöds kan användas på CodePen på samma sätt:
Accentsconagua
@ regel för plugin du vill användaHär är den (visuellt oremarkable) demo som vi just byggt:
Prepros kanske inte har utbudet av plugin-support som CodePen har, men det inkluderar även sömlös aktivering av båda Autoprefixer och cssnext. Prepros kan laddas ner från https://prepros.io.
För att komma igång dra och släpp ett projekt som innehåller en CSS-fil i gränssnittet. Klicka sedan på CSS-filens namn för att öppna en panel med inställningar på höger sida. Härifrån kan du kolla rutorna märkta AutoPrefix CSS för att aktivera Autoprefixer, och Aktivera Cssnext för att kunna använda cssnext:
Du kan nu använda alla funktioner i cssnext plugin-paketet, samt att ha CSS autoprefixed.
Okej, låt oss snabbt sammanfatta vad vi har täckt ovan:
@ regler för att möjliggöra specifika pluginsCodePen och Prepros är två bra sätt att komma igång med PostCSS nästan direkt. Nackdelen är dock att du inte får bestämma vilka plugins som ska användas.
När du är redo att utnyttja PostCSS fullständiga kraft, vill du välja och konfigurera ditt eget urval av plugins. Förmodligen det mest tillgängliga sättet att göra detta är genom att ställa in egna PostCSS-projekt via arbetslöpare som Gulp eller Grunt.
Du lär dig hur du går till det i de följande två handledningarna, "Snabbstartguide: Gulp Setup" och "Snabbstartguide: Grunt Setup".
