Share
I den tidigare handledningen gick vi igenom hur man använder den utmärkta förbehandlingspaketet "PreCSS". I denna handledning kommer vi att närma oss PostCSS-baserad förbehandling på ett annat sätt; installera ett handplockat urval av plugins för att skapa vår preprocessor från grunden.
Jag ska ta dig genom installationen av vad jag personligen hitta en bra blandning av plugins för språktillägg. Men när det gäller att rulla din egen förbehandlare kan du välja att bara använda några av de plugins som vi täcker här, eller du kan välja ingen alls, istället gå med andra alternativ.
Det är skönheten i denna process; Du kan ha din preprocessor setup men du väljer. Syftet med denna handledning är att ge dig praktisk erfarenhet av att sätta ihop en PostCSS preprocessor och att fylla på funktionerna i de aktuella plugins så att du själv kan bestämma vilken du vill använda.
Låt oss börja!
Det 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 kommandot npm installera.
Denna handledning förutsätter att du har följt de tidigare inmatningarna i serien och är nu bekanta med hur man installerar ett plugin i ditt projekt och laddar det via din Gulpfile eller Gruntfile.
Viktig! När vi går igenom, var noga med att ladda plugin till din Gulpfile / Gruntfile i den ordning du ser i denna handledning. lastorder är viktigt i PostCSS för att hålla allt igång.
Den allra första platsen vi börjar med att sätta ihop vår anpassade förbehandlare är import. Du har redan sett PostCSS inlining of @importera stylesheets i tidigare tutorials för Minifiering och Optimering och förbehandling med PreCSS. Sättet att importera kommer att användas i denna förbehandlare är inte annorlunda.
Vi har bara berört ovanför det faktum att lastorder är viktigt i PostCSS, och här hittar vi det första exemplet på detta. Vi vill säkerställa alla @importera filer är inline som det allra första steget, så att vi har alla koden i vårt projekt på ett ställe för att resten av våra plugins ska springa emot.
Till exempel kan vi lagra alla våra variabler i en partiell fil och använda @importera att föra det delvis till vårt huvudsakliga stilark. Om vi inte kör plugin som inlines @importera filer först, våra variabler skulle inte importeras och skulle därför inte vara tillgängliga för resten av vår bearbetning att arbeta med.
Eftersom vi ska börja importera partiklar vill vi göra en liten tweak till vår Gulpfile innan vi lägger till vår importfunktionalitet.
Notera: om du använder Grunt behöver du inte göra några ändringar i detta skede.
Just nu har vi en ".css" -fil som finns i "src" -mappen som kompilerats, men vi vill inte av misstag sammanställa dela filer. Vi importerar allt till vår "style.css" -fil, så det är den enda som behöver sammanställas.
Hitta den här raden:
Accentsconagua
returnera gulp.src ('./ src / *. css')... och byt till:
returnera gulp.src ('./ src / style.css')Det här är samma plugin som vi använde i "För Minifiering och Optimering" -tutorial, och det används också i PreCSS, så du är lite bekant med den vid denna tidpunkt.
Installera pluginprogrammet i ditt projekt, och skapa en fil med namnet "_vars.css" i din "src" -mapp och lägg till några grundläggande testkod för den. Observera att vi inte har lagt till variabler funktionalitet än, så bara några raka CSS, till exempel:
.test bakgrund: svart;
Importera nu din nya variablerfil till din huvudfil "src / style.css" genom att lägga till den här koden på första raden:
@import "_vars";
Kompilera din kod, kolla sedan din "dest / style.css" -fil och du bör se att den nu innehåller koden från din "_vars.css" -fil.
Notera: den här plugin måste exekveras före de postcss-nested och postcss-simple-vars plugins, båda som vi ska använda.
Fortsätt och installera postcss-mixins, lägg sedan till följande kod i din "src / style.css" -fil:
@ define-mixin icon $ network, $ color . knapp. $ (nätverk) background-image: url ('img / $ (network) .png'); bakgrundsfärg: $ color; @mixin ikon twitter, blå;Efter kompilering ska din "dest / style.css" ha följande sammanställda kod tillagd till den:
.button.twitter bakgrundsbild: url ('img / twitter.png'); bakgrundsfärg: blå; Postcss-mixins plugin vi använder här är samma som används i PreCSS. Vi gick över hur du använder den i handledningen på PreCSS, så för fullständiga detaljer om sin syntax kolla "Mixins" -delen i föregående handledning.
Om du föredrar att använda Sass-syntax när du skapar mixins, kolla in Andy Janssons plugin för postcss-sassy-mixins, som fungerar på samma sätt som postcss-mixins men med syntaxen @blanda i att definiera en mixin och @inkludera att använda en.
Notera: postcss-för plugin är ett annat måste exekveras innan postcss-nested och postcss-simple-vars.
Installera postcss-för plugin och test sedan det fungerar som förväntat genom att lägga till den här koden i filen "src / style.css":
@for $ i från 1 till 3 p: nth-of-type ($ i) margin-left: calc (100% / $ i);
Det bör sammanställas för att ge dig:
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);
Återigen, plugin vi använder för att lägga till @för slingor är desamma som används i PreCSS, så för extra information om sin syntax kolla in avsnittet "Slingor" i föregående handledning.
Postcss-för plugin måste köras före postcss-simple-vars, vilket betyder att det inte finns något sätt att använda variabler för att ställa in det intervall du vill ha @för loop till iterera genom.
Om det här är ett problem kan du istället använda denna gaffel av postcss-för plugin som istället ska laddas efter postcss-simple-vars plugins.
Eftersom det går efter att variabler utvärderas, kan du använda variabler för att ställa in det intervall du vill ha @för loop för att iterera genom, så här:
@ från: 1; @count: 3; @for $ i från @from till @count p: nth-of-type ($ i) margin-left: calc (100% / $ i);
Vi ska lägga till två typer av variabler till vår förbehandlare, vilka båda kan vara mycket praktiska. Den första typen använder Sass-liknande syntax, och den andra använder syntaxen för CSS-anpassade egenskaper, annars kända som CSS-variabler.
Installera dessa två plugins, så ska vi testa varje i taget.
Först testar vi Sass-liknande syntaxen av postcss-simple-vars. Öppna filen "_vars.css" du gjorde tidigare, ta bort innehållet och lägg till följande kod:
$ default_padding: 1rem;
Lägg till följande i filen "src / style.css" och kompilera om:
.posta padding: $ default_padding;
Det bör sammanställas för att ge dig:
.posta padding: 1rem;
Nu ska vi testa CSS anpassade egenskaper som syntax av postcss-css-variabler. Lägg till följande kod i din "src / style.css" -fil:
: root --h1_font_size: 3rem; h1 font-size: var (- h1_font_size); @media (maxbredd: 75rem) h1 --h1_font_size: 4vw;
Den borde kompilera i:
h1 font-size: 3rem; @media (maxbredd: 75rem) h1 font-size: 4vw;
Observera att när vi använder CSS-variabler, behövde vi bara ändra värdet på --h1_font_size variabel inuti mediefrågan och utmatar automatiskt den associerade textstorlek fast egendom. Detta är särskilt användbar funktionalitet.
Innan jag fortsätter ska jag bara korta nämna igen, att det tillvägagångssätt som tagits i den här handledningen inte är ditt sätt att använda ha att ta. Om du vill använda en typ av variabel och inte den andra är det helt bra.
Ur mitt perspektiv är anledningen till att jag gillar att använda båda typerna av variabler jag använder dem på två olika sätt. Jag brukar använda CSS anpassade egenskaper syntaxen i mitt huvudsakliga stylesheet, medan jag använder Sass-liknande variabler i mina partiella filer.
Det här låter mig definiera CSS anpassade egenskaper för typen av variabler som jag faktiskt kan använda i ett live-projekt om / när de blir bra stödda över webbläsare. Som du såg i ovanstående exempel har de också viss funktionalitet som Sass-liknande variabler inte gör.
Under tiden kan jag använda Sass-liknande variabler för saker som inte hör hemma i ett levande stilark, särskilt de som existerar rent för att behandlas genom saker som varje loop, conditionals och andra omvandlingar.
Som ett alternativ till att använda postcss-simple-vars kan du överväga att använda postcss-advanced-variabler, plugin som används som en del av PreCSS-paketet.
Detta är också ett utmärkt alternativ, med den primära skillnaden att den hanterar conditionals, loopar och variabler i samma plugin. För mig, anledningen till att jag för närvarande väljer postcss-simple-vars föredrar jag att conditionals kommer från en separat plugin; postcss-conditionals som vi kommer att täcka inom kort.
Istället för att använda postcss-css-variabler kanske du föredrar postcss-anpassade egenskaper.
Den väsentliga skillnaden mellan de två är postcss-anpassade egenskaper överensstämmer strikt med W3C-specifikationen för anpassade egenskaper så att du kan vara säker på att du skriver bara rätt framtida CSS. Å andra sidan erbjuder postcss-css-variabler extra funktionalitet, men därmed hävdar det inte att de har fullständig paritet med spec.
Jag väljer personligen postcss-css-variabler eftersom jag använder den i samband med förbehandling där jag skriver en hel del icke-spec-kod ändå. Som sådan skulle jag helst ha den extra funktionaliteten över 100% spec compliance.
Men om du använder variabler i samband med att skriva framtida CSS kan du hitta postcss-anpassade egenskaper är en bättre passform för dig.
Installera postcss-varje plugin lägg sedan till den här variabla koden i din "_vars.css" -fil:
$ social: twitter, facebook, youtube;
Denna kod definierar en lista, lagrad i $ social variabel.
Nu ska vi skapa en @varje loop för att iterera genom de värden som lagras i vår $ social variabel. Lägg till den här koden i din "src / style.css" -fil:
@each $ icon i ($ social) .icon - $ (ikon) bakgrund: url ('img / $ (ikon) .png'); Vår @varje loop är nu klar, men innan vi kan kompilera det behöver vi göra en liten konfigurationsändring till alternativen för postcss-simple-vars.
Du märker det i koden ovan använder vi $ ikon för att representera det nuvarande värdet vi itererar genom. Vissa svårigheter kan härröra från detta eftersom plug-in-simple-vars plugin letar efter $ logga in för att identifiera variabler.
Det betyder att det kommer att se $ ikon, tänk att det är en variabel, försök att bearbeta det och se att det inte har ett värde. Det gör att det slutar att kompilera och logga ett fel till konsolen att det upptäcks en odefinierad variabel.
För att lösa detta vill vi lägga till alternativet tyst: sant till våra alternativ för plugin. Det betyder att om det upptäcker en odefinierad variabel kommer det inte sluta att kompilera för att logga ett fel, det kommer bara att fortsätta. Därför kommer det inte att vara stört av närvaron $ ikon i vår @varje loop och vi kommer att kunna kompilera framgångsrikt.
I processorns array av din Gulpfile eller Gruntfile, ställ in alternativet:
/ * Gulpfile * / simple_vars (tyst: true) / * Gruntfile * / require ('postcss-simple-vars') (tyst: true)Kompilera nu din CSS och du borde få:
.ikon-twitter bakgrund: url ('img / twitter.png'); .icon-facebook bakgrund: url ('img / facebook.png'); .icon-youtube bakgrund: url ('img / youtube.png'); Som tidigare nämnts är postcss-advanced-variabler ett annat utmärkt pluginalternativ som hanterar variabler, loopar och conditionals allt i ett.
Jag nämnde tidigare att det här pluginet är min preferens för hantering av villkor. Detta beror på att jag har funnit det kan hantera mer komplexa villkorliga kontroller. Det inkluderar stöd för @else om syntax, vilket innebär att du kan testa mot fler villkor i ett enda kodstycke.
Efter installationen av plugin för postcss-conditionals, testa det genom att lägga till den här koden i din "src / style.css" -fil:
$ column_count: 3; kolumn @if $ column_count == 3 bredd: 33%; flyta till vänster; @else om $ column_count == 2 width: 50%; flyta till vänster; @else bredd: 100%;
Den här koden kommer att kolla på det värde som vi har angivit i variabeln @column_count och kommer att mata ut olika bredd- och flytvärden beroende på vad den finner. Det fungerar på samma sätt som koden vi använde i föregående förbehandlingshandledning, men nu har vi möjlighet att använda @else om linjer vi har kunnat öka antalet villkor vi testar från två till tre.
Efter omkompilering bör detta ge dig:
.kolumn bredd: 33%; flyta till vänster
Försök att ändra $ COLUMN_COUNT till 2 eller 1 och sammanställa igen för att se hur det ändrar CSS-utgången.
Vi kan också använda dessa typer av conditionals bra inom mixins, för vilka vi lagt till stöd tidigare. Till exempel kan vi skapa en mixin för att skapa kolumnlayoutkoden som så:
@ define-mixin kolumner $ count @if $ count == 3 width: 33%; flyta till vänster; @else om $ count == 2 width: 50%; flyta till vänster; @else bredd: 100%; .andra_kolumn @mixin kolumner 2;
Detta ger dig produktionen:
.another_column width: 50%; flyta till vänster;
Som tidigare nämnts är postcss-advanced-variabler ett annat utmärkt pluginalternativ som hanterar variabler, loopar och conditionals allt i ett.
I en tidigare handledning använde vi postcss-calc, via cssnano, för att hjälpa till att göra instanser av calc () använd mer effektivt. I samband med förbehandling kan det dock vara mycket användbart varhelst vi kanske vill använda matte i våra stylesheets.
Fortsätt och installera postcss-calc, då kommer vi att testa det genom att göra kolonnegenerations mixin vi lagt till ovan effektivare.
Just nu använder vi conditionals för att kontrollera om mixin är $ count argumentet är inställt på antingen 1, 2 eller 3 sedan utmatar en motsvarande förberäknad bredd. I stället använder vi calc () att automatiskt mata ut rätt bredd för vår kolumnkod, oavsett vilket nummer som passerar genom mixin.
Lägg till i filen "src / style.css":
@ define-mixin columns_calc $ count width: calc (100% / $ count); @if $ count> 1 float: left; .column_calculated @mixin columns_calc 2;
I stället för att hårdkoda de procentuella bredderna vi behöver för vissa antal kolumner, beräknar vi nu det på flyg.
Postcss-calc-plugin konverterar bredd: calc (100% / $ räknat); in i en statisk mängd beroende på värdet som passerat när vi kallar mixin, i det här fallet 2.
Kompilera din kod och du bör se denna produktion:
.column_calculated width: 50%; flyta till vänster;
Notera: Varhelst postcss-calc kan lösa calc () till ett statiskt värde kommer det att mata in det i din kod. Om det inte kan det kommer det inte att ändras, så du kan fortfarande använda calc () för värden som måste hanteras av webbläsaren vid körning.
För nestning använder vi samma plugin som används i PreCSS-paketet, så du kan referera till föregående handledning för fullständig information om syntax.
Installera postcss-nested så testa att allt fungerar korrekt genom att sammanställa denna kod:
.meny bredd: 100%; en text-decoration: none;
Din resulterande CSS ska vara:
.meny bredd: 100%; .menu en text-decoration: none;
För förlängning använder vi pluginet för postcss-sass-extend. Det kommer att ge oss olika syntax att använda än vad vi täckte i vår tidigare handledning om att arbeta med PreCSS. I stället för att sträckas definieras med @ define-extend extension_name ... de är definierade med % extend_name ....
De används fortfarande med väsentligen samma syntax av @extend% extend_name;.
Observera att postcss-sass-extend plugin faktiskt skickas med PreCSS, men jag antar att den inte laddas som standard som när jag försökte använda den önskade syntaxen som den inte kompilerade.
Efter installationen av postcss-sass-sträcka in i ditt projekt, testa det med följande kod:
% rounded_button border-radius: 0.5rem; vaddering: 1em; kantbredd: 0,0625rem; gränsstil: fast; .blue_button @extend% rounded_button; Gränsfärg: # 2F74D1; bakgrundsfärg: # 3B8EFF; .red_button @extend% rounded_button; kantfärg: # C41A1E; bakgrundsfärg: # FF2025;
Den borde kompilera i:
.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;
Hittills har vi täckt vad som kan betraktas som kärnfunktioner som är gemensamma för de flesta preprocessorer. Det finns dock ännu fler plugins tillgängliga för att erbjuda extra funktioner. Några av dessa funktioner finns i andra preprocessorer, och du måste gå till PostCSS för att hitta. Vi ska gå över dessa extra alternativ kortfattat nu.
Möjligheten att tweak färger kan vara en av de mest användbara funktionerna som finns i preprocessorer. Det finns faktiskt flera färg plugins för PostCSS, men det här är tre som befinner sig särskilt hemma i en preprocessing setup. De möjliggör olika färgtransformationer, inklusive ljussättning, förmörkelse, mättnad, tillsättning av alfavärden och mer.
Funktionen som erbjuds av detta plugin kan jämföras med de sömlösa mixinsna av Stylus, varför, snarare än att använda en syntax som @blanda i, du definierar bitar av kod på ett sådant sätt att de senare kan användas i kod på samma sätt som en inhemsk egendom, t.ex..
/ * Definiera en egenskap * / storlek: $ size height: $ size; bredd: $ size; / * Använd den som en infödd egendom * / .square size: 50px;
Pluggen kan också användas för att omdefiniera inhemska egenskaper som passar dina behov.
Fastighetssökning är en funktion som finns i Stylus som kan vara mycket praktisk. Det låter dig leta upp värdet på en fastighet från samma stil. Du kan till exempel ställa in en rätt marginal för att matcha vänster med: marginal-vänster: 20px; marginal-höger: @ margin-left;
Medan den regelbundna nestningen vi täckte ovanför oskärpa-selektörer, stannar pluggen-nestad-props-pluggarna kapslade egenskaper, till exempel:
/ * Originalkod * / .element border: width: 1px; stil: fast; färg: #ccc; / * Efter bearbetning * / .element border-width: 1px; gränsstil: fast; kantfärg: #ccc;
Matchning ger dig ett annat sätt att utföra villkorliga kontroller, den här gången med Rust som mönster matchning, något som liknar växlar uttalanden i JavaScript eller PHP. Detta kan ge dig ett effektivare sätt att kontrollera flera villkor än att skriva många @om annat checkar.
CSS sprite generation, en populär funktion i Compass, kan också göras via plug-in-plug-in. Plugin kommer att skanna din CSS för bilder, kombinera dessa bilder med ett sprite-ark, och uppdatera din kod efter behov för att kunna visas från det nya spritarket korrekt.
Det finns för närvarande en väldigt robust lista över pluggar för språktillägg att välja mellan, mer än vad vi kan täcka här, så kolla in hela listan på: https://github.com/postcss/postcss#language-extensions
För många människor är förmågan att skriva i täta, effektiva syntaxer (vanligtvis sans semikolon och lockiga axlar) en av de stora appellerna till preprocessorer som Stylus eller Sass. Den nyligen släppta version 5.0 av PostCSS stödjer nu anpassade parsers som möjliggör att nya syntaxer kan stödjas. SugarSS ska vara den terse syntaksparsaren, och diskussioner är för närvarande öppna för hur denna syntax ska struktureras.
PostCSS är fortfarande relativt ny och du kan hitta att det finns något du vill uppnå med din anpassade förprocessor, för vilken det för närvarande inte finns någon plugin. Skönheten hos detta modulära ekosystem är att du har möjlighet att själv lösa det problemet genom att skapa ditt eget plugin. Vem som helst kan göra det, och hinderet för ingången är betydligt lägre än vad du skulle försöka lägga till din egen funktionalitet till Stylus, Sass eller LESS. Vi lär oss hur i en senare handledning.
Du behöver inte välja mellan PreCSS och rulla din egen förbehandlare om du vill använda PostCSS. Du kan faktiskt välja bort någon PostCSS-baserad förbehandling helt om du väljer, istället använder den sida vid sida med din favorit preprocessor.
I nästa handledning lär vi dig hur du använder PostCSS i kombination med Stylus, Sass eller LESS. Vi ses där!
