Share
I de två sista handledningarna såg vi på sätt att använda PreCSS på färdiga stylesheets för att förbättra deras kompatibilitet och optimering av kors webbläsare, i huvudsak som en posta-processor. I denna handledning lär du dig att använda PostCSS som en pre-processor, på samma sätt som du skulle använda Stylus, Sass eller LESS.
Det finns två huvudsakliga sätt att använda PostCSS för förbehandling. En är att välja alla egna plugins för att lägga till den förprogrammeringsfunktionalitet du vill ha, och den andra är att installera ett paket förinställda plugins så att du är redo att gå direkt.
Vi börjar med det snabbaste och enklaste sättet att installera det perfekta PreCSS-paketet med plugins, skapat av Jonathan Neal. I handledningen efter detta kommer vi att flytta på hur du kan sätta ihop din egen förbehandlare, med bara den funktionalitet du vill ha.
Denna handledning förutsätter att du har en viss förtrogenhet med de funktioner som vanligtvis finns i preprocessorer som Stylus, Sass eller LESS. Det är bara för att vi ska fokusera på på vilket sätt Du kan använda dessa samma typer av funktioner via PostCSS, snarare än Vad funktionerna faktiskt gör. Det sagt, även om du aldrig har använt en förprocessor tidigare, kan det vara den perfekta platsen att börja.
Vi går igenom hur du konfigurerar ett Gulp eller Grunt-projekt med PreCSS i nästa avsnitt, men om du vill ta en genväg, (för tillfället) kan du alternativt använda live demo-lekplatsen för att prova koden vi går igenom i den här handledningen. Koden kan skrivas i det vänstra fönstret, och det kommer automatiskt att kompilera för dig och visas i det högra fönstret.
PreCSS Live Editor: https://jonathantneal.github.io/precssDet första du behöver göra är att ställa in ditt projekt för att använda antingen Gulp eller Grunt, beroende på vad du föredrar. Om du inte redan föredrar en eller annan, rekommenderar jag att du använder Gulp eftersom du behöver mindre kod för att uppnå samma ändar.
Du kan läsa om hur du konfigurerar Gulp eller Grunt-projekt för PostCSS i de tidigare handledningarna
respektive.
Om du inte vill manuellt konfigurera ditt projekt från början, kan du ladda ner källfilerna som bifogas denna handledning och extrahera antingen det angivna Gulp eller Grunt-startprojektet i en tom projektmapp.
Sedan, med en terminal eller kommandotolk som pekas på mappen, kör kommandotnpm installera.
Oavsett om du använder Gulp eller Grunt, installera PreCSS i ditt projekt med kommandot:
npm installera precss - save-dev
Om du använder Gulp, lägg till den här variabeln under de variabler som redan finns i filen:
Accentsconagua
var precss = kräver ("precss");Lägg nu till det nya variabelnamnet i din processorer array:
var processorer = [precss];
Gör ett snabbt test att allt fungerar genom att köra kommandot gulp css Kontrollera sedan att en ny "style.css" -fil har dykt upp i projektets "dest" -mapp.
Om du använder Grunt, uppdatera processorer objekt som är nestat under alternativ objekt till följande:
processorer: [kräver ("precss") ()]Gör ett snabbt test att allt fungerar genom att köra kommandot grunt postcss Kontrollera sedan att en ny "style.css" -fil har dykt upp i projektets "dest" -mapp.
Du har nu allt du behöver för att använda PreCSS installerat och redo att gå. Det betyder att vi är redo att börja gå igenom några av PreCSS-förbehandlingsmöjligheterna och hur de kan användas.
Generellt sett är PreCSS-syntaxen mest likadan som Sass. Men det använder sig av sina egna unika tillvägagångssätt, som vi kommer att täcka när vi går vidare.
Notera: På grund av Sass-liknande syntaxen i PreCSS, kommer du att upptäcka att en Sass-syntaxficklampa fungerar bäst för dig i din favorit textredigerare.
Nesting är något vanligt för alla tre av de stora preprocessorerna, dvs Stylus, Sass och LESS, och det finns också i PreCSS. Nesting i PreCSS görs på samma sätt som i Sass och LESS, genom att placera väljare i de andra väljarna.
Förmågan att använda & symbol för att föräldrarsväljaren dupliceras i barnväljaren fungerar också på samma sätt i PreCSS som i andra förbehandlare.
Försök lägga till följande nestad kod till din "src / style.css" -fil:
.meny bredd: 100%; en text-decoration: none; & :: före innehåll: ";
Kompilera din CSS med gulp css eller grunt postcss och din "dest / style.css" -fil borde ha utvärderat den nestade koden i följande:
.meny bredd: 100%; .menu en text-decoration: none; .menu :: före innehåll: ";
Variabler är en annan typ av funktionalitet som är gemensam för alla förprocessorer, och de ingår i PreCSS. Det enda som vanligtvis skiljer sig från varje preprocessor är att syntaxen betecknar variabler.
@ symbol och placera a : före värdet. $ symbol och placera en = teckna före värdet. $ symbol och placera a : före värdet.I enlighet med PreCSS-tendensen att använda Sass som syntax lägger den också en $ före variabelnamnet och a : före värdet.
Prova med att använda PreCSS-variabler genom att lägga till detta i filen "src / style.css":
$ text_color: # 232323; kropp färg: $ text_color;
Efter omkompilering bör du se den här resulterande koden:
kropp färg: # 232323;
Conditionals, dvs.. om och annan logik, är en funktion som är mycket stark i både Sass och Stylus. MINDER erbjuder bevakade mixins, men de erbjuder inte lika mycket kraft. Conditionals finns i PreCSS och följer samma syntax som Sass, med användning av @om och @annan.
Lägg till denna exempelkod till din "src / style.css" -fil:
$ column_layout: 2; kolumn @if $ column_layout == 2 bredd: 50%; flyta till vänster; @else bredd: 100%;
I ovanstående exempel har vi en .kolumn klassutmatning annorlunda beroende på om vi vill ha en kolumnlayout eller en två kolumnlayout. Vi har $ column_layout variabel satt till 2, vilket betyder att vi borde se bredd: 50%; flyta till vänster; utmatas i vår klass.
Kompilera din fil, och du bör se följande i din "dest / style.css" -fil.
.kolumn bredd: 50%; flyta till vänster
Notera: plug-in-avancerade variabler-plugin som tillhandahåller denna funktionalitet är fortfarande ganska ny, och jag har stött på några oväntade utdata när jag använder den för mer komplexa villkor, men jag är säker på att den kommer att uppdateras inom en snar framtid.
Det finns ett alternativt plugin som kan användas för conditionals som heter postcss-conditionals. Vi täcker hur du kan använda det pluginet (om du väljer) i nästa handledning, "Rolling Your Own Preprocessor".
@för och @varje Det finns två typer av slingor tillgängliga i PreCSS, the @för och @varje loopar. Båda dessa använder ett tillvägagångssätt som är precis som Sass. "För" loopar låter dig cykla genom en numerisk räknare, medan "varje" loopar låter dig cykla genom en lista med objekt.
@för LoopsI en @för loop Det finns en "räknare" -variabel som håller reda på var du cyklar via din numeriska räknare, vanligtvis inställd som $ i. Till exempel, när iterering från 1 till 3 kommer det att finnas tre slingor; i den första $ i kommer att vara lika 1, den andra kommer det att vara lika 2 och den tredje kommer det att vara lika 3.
Detta $ i motvariabel kan interpoleras till både selektorer och regler, vilket kan vara väldigt användbart för saker som generering n: te-of-typ () regler och beräkningsbredd.
Lägg till den här koden i din "src / style.css" -fil för att prova en @för slinga:
@for $ i från 1 till 3 p: nth-of-type ($ i) margin-left: calc (100% / $ i);
Efter sammanställningen bör du se denna kod utökad till:
p: nth-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);
Notera: tal 1, 2 och 3 har infogats i var och en av ovanstående stilar.
@varje LoopsEn @varje loop cyklar genom en lista med objekt istället för siffror. Som med @för slingor kan variabeln som representerar slingens aktuella objekt interpoleras till selektorer och regler. Observera att för att interpolera till en sträng måste du infoga en uppsättning parentes i variabelnamnet i formatet $ (Var).
Ge med PreCSS @varje loopar går genom att lägga till följande exempelkod:
$ social: twitter, facebook, youtube; @each $ icon i ($ social) .icon - $ (ikon) bakgrund: url ('img / $ (ikon) .png'); Efter sammanställning bör du se följande CSS har genererats:
.ikon-twitter bakgrund: url ('img / twitter.png'); .icon-facebook bakgrund: url ('img / facebook.png'); .icon-youtube bakgrund: url ('img / youtube.png'); Syntaxen för mixin skapande är en aspekt av PreCSS som är lite annorlunda än Sass.
I Sass, för att definiera en mixin använder du syntaxen @ mixin mixin_name ($ arg1, $ arg2) ... och använd sedan med @include mixin_name (pass_arg1, pass_arg2);.
I PreCSS definierar du däremot en mixin med syntaxen @ define-mixin mixin_name $ arg1, $ arg2 ... och använd den med @mixin mixin_name pass_arg1, pass_arg2;.
Lägg till detta exempel i filen "src / style.css":
@ define-mixin icon $ network, $ color . knapp. $ (nätverk) background-image: url ('img / $ (network) .png'); bakgrundsfärg: $ color; @mixin ikon twitter, blå; @mixin ikon youtube, röd;Vid sammanställning bör du se:
.button.twitter bakgrundsbild: url ('img / twitter.png'); bakgrundsfärg: blå; .button.youtube bakgrundsbild: url ('img / youtube.png'); bakgrundsfärg: röd; Notera: Argument som passerar genom mixin kan interpoleras till selektorer och strängar med samma tillvägagångssätt som nämns i @varje slingor ovan; med formatet $ (Var).
Förutom att använda mixins på det sätt som visas ovan, kan de också sättas in för att konsumera blockerade innehåll som passerat när man ringer mixin. Detta är i huvudsak samma process som med Sass ' @innehåll.
Ändra till exempel mixin från ovanstående exempel, placera @ Mixin-innehåll där du vill ha ett visst block av innehåll som ska visas:
@ define-mixin icon $ network, $ color . knapp. $ (nätverk) background-image: url ('img / $ (network) .png'); bakgrundsfärg: $ color; @ Mixin-innehåll; När en mixin innehåller @ Mixin-innehåll används, måste den placeras med häftiga hakparentes, snarare än på en enda linje som slutar med a ;, eller det kommer inte att kompilera.
Uppdatera din kod så att dina mixin-samtal ser ut så här:
@mixin ikon twitter, blå width: 3rem; @mixin ikon youtube, röd bredd: 4rem;
Efter sammanställning bör detta ge följande kod - notera att bredd innehållet passerade genom varje användning av mixin:
.button.twitter bakgrundsbild: url ('img / twitter.png'); bakgrundsfärg: blå; bredd: 3rem; .button.youtube bakgrundsbild: url ('img / youtube.png'); bakgrundsfärg: röd; bredd: 4rem; Extends liknar mixins i en mening, genom att de är utformade så att du kan återanvända block av kod. Tanken bakom "sträcker sig" är emellertid att skapa en basuppsättning av kod som du vet att du kommer att använda på exakt samma sätt flera gånger för en viss typ av element. Du kan sedan förlänga den basen med ytterligare, icke-standardkod.
I PreCSS är syntaxen för att definiera en förlängning @ define-extend extension_name ....
I din "src / style.css" -fil definierar du en förlängning som innehåller grundstilarna för en rundad knapp som så:
@ define-extend rounded_button border-radius: 0.5rem; vaddering: 1em; kantbredd: 0,0625rem; gränsstil: fast;
Den här standardinställningen av stilar är nu klar att förlängas med extra kod, till exempel inställning av saker som bakgrundsfärg och gräns färg. Detta görs genom att använda syntaxen @extend extension_name; för att importera de basformat som definieras i förlängningen.
Lägg till den här exempelkoden, under den kod du just lagt till:
.blue_button @extend rounded_button; Gränsfärg: # 2F74D1; bakgrundsfärg: # 3B8EFF; .red_button @extend rounded_button; kantfärg: # C41A1E; bakgrundsfärg: # FF2025;
Där det @extend rounded_button; linjen används, kommer hela innehållet i förlängningen att införas.
Kompilera dina stilar och du borde få:
.blue_button, .red_button border-radius: 0.5rem; vaddering: 1em; kantbredd: 0,0625rem; gränsstil: fast; .blue_button border-color: # 2F74D1; bakgrundsfärg: # 3B8EFF; .red_button border-color: # C41A1E; bakgrundsfärg: # FF2025;
Observera också att de vanliga förekommande stilarna .blue_button och .red_button klassen har kombinerats för effektivitet.
Pluggen används för inlining av stylesheets via @importera är samma som vi täckte i den tidigare handledningen i serien: För Minifiering och Optimering. För en översikt över hur det fungerar går huvudet och läs av avsnittet "Inline / Combine Files with @import".
I samband med att PostCSS används som preprocessor blir importen ännu mer användbar eftersom de ger dig möjlighet att konfigurera partiklar, något som du kan vara van vid från andra förbehandlingslösningar. Du kan till exempel konfigurera en "partials" -mapp, separera ditt projekt i logiskt diskreta partiella filer och importera dem så här:
@import "partials / _variables.css"; @import "partials / _utilities.css"; @import "partials / _mixins.css"; @import "partials / _extends.css";
Jag hoppas att du nu har några insikter om hur kraftfull PostCSS kan vara som förprocessor genom PreCSS-paketet. För att sammanfatta vad vi täckte ovan:
@ define-mixin mixin_name $ arg1, $ arg2 ... @mixin mixin_name pass_arg1, pass_arg2; @ Mixin-innehåll kan användas på samma sätt som Sass ' @innehåll @ define-extend extension_name ...@extend extension_name;@importera inlines externa CSS-filer, särskilt användbart för att använda partialsPreCSS är ett fantastiskt projekt, som sammanför några utmärkta språkförlängningspluggar och gör PostCSS-baserad förbehandling ganska mycket plug-and-play. Det ger nästan all den funktionalitet som de flesta förprocessoranvändare har förväntat sig, och är en snabb, "ingen krångel" sätt att få PostCSS-förprocessorns boll att rulla.
Att använda PreCSS är en av de två metoderna för PostCSS preprocessing som vi nämnde i början av denna handledning. Den andra metoden är att konfigurera din egen preprocessor, handplockar pluginprogram för språktillägg som passar dina egna projekt eller kodningsstil. Avvägningen är det är lite mer setup, men i gengäld får du friheten att sätta ihop en förprocessor som fungerar men du vill att den ska.
Du lär dig hur du gör det i nästa handledning, "Rulla din egen preprocessor".
