, postcss dybt dyk: rul dit eget preprocessor,,,,, 34,,,,,,,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss. denne post er en del af en serie kaldet postcss dybt dive.postcss dybt dyk. preprocessing med "precss" ved hjælp af postcss sammen med frækhed, stylus eller mindre i det foregående forelæsning, vi har oplevet, hvordan man bruger den fremragende preprocessing pack "precss".i denne forelæsning nærmer mig postcss baseret preprocessing på en anden måde, at installere en håndplukket udvælgelse af plugins skik og brug bygge vores   preprocessor fra jorden op.,, jeg tager dig gennem oprettelsen af det, jeg personligt synes at være en god blanding af   sprog, udvidelse   plugins.men når det kommer til dig på din egen preprocessor, du kan vælge kun at anvende nogle af de plugins dækker vi her, eller du kan vælge slet ikke i stedet med   andre muligheder. det er det skønne ved denne proces, kan du preprocessor opsætning, men du vælger.formålet med denne forelæsning vil være at give dig hånden på erfaring med at sammensætte en postcss preprocessor, og at fylde dig med på   elementer af de tilgængelige plugins, så kan du selv bestemme, hvor man ønsker at bruge, lad os begynde.,, før dit projekt, er det første, du skal gøre er at fælde din projekt at anvende enten sodavand eller grynter, afhængigt af deres præferencer.hvis du ikke allerede har en forkærlighed for det ene eller det andet anbefaler jeg med sodavand, som du får brug for mindre kode for at nå de samme mål, kan du læse om, hvordan vi skal fælde sodavand eller grynter projekter for postcss i den foregående tutorials,, postcss hurtigt skal iværksættes vejledning: gulp fælde   eller, postcss hurtigt skal iværksættes vejledning: grynt fælde,,.,, hvis du ikke vil have manuelt at fælde din projekt fra bunden, men du kan   downloade kilde filer, der er knyttet til denne forelæsning,   og ekstrakt   enten forudsat sodavand eller grynter   første projekt til en tom projekt mappe.  ,,, med en terminal eller kommando. hurtig, pegede på den mappe, løb kommando  , new public management installere,.,, bestemmelse om stik af anlæg, denne forelæsning vil tro, de har fulgt de foregående entriei serien, og nu er bekendt med, hvordan til at installere et stik af med dit projekt, og læs det via deres gulpfile eller gruntfile.,,, vigtig. , som vi gennemgår, være sikker på, at lade den plugins i din gulpfile /gruntfile i den rækkefølge, de ser i denne forelæsning; belastning for er vigtigt i postcss at holde alt kørende, tilføje importen for fragmenter,, det første sted, vi skal til at begynde med at samle vores skik preprocessor er importen.du har allerede set postcss inlining af @ import, stylesheets i den foregående tutorials for minification og optimering og preprocessing med precss.sådan import vil blive anvendt i denne preprocessor er ikke anderledes.,, vi har lige rørt over den kendsgerning, at belastningen for er vigtigt i postcss, og her finder vi det første eksempel på dette.   ønsker vi at sikre, at alle, @ import, filer er inlined som det allerførste skridt, så vi har alle koden for vores projekt i stedet for resten af vores plugins at løbe imod.  , f.eks. vi kan opbevare alle variabler i en delvis   fil, og anvendelse  , @ import,   at bringe  , der delvis i vores vigtigste stylesheet.hvis vi ikke kører stik af, at inlines, @ import,   filer først vores variabler ikke importeres, og dermed ville ikke   til rådighed for resten af vores behandling til at arbejde med. først ændre gulpfile kilde fil "stil. css", fordi vi skal begynde at importere delvise. vi vil gerne gøre lidt til vores gulpfile, før vi tilføje vores import - funktionalitet.  ,,,,,,,, hvis anvendelse af mus, behøver du ikke at foretage nogen ændringer i denne fase. og lige nu er vi under en ". css" fil fundet i "src" folder udarbejdes, men vi vil ikke kom til at udarbejde delvis filer.vi vil importere alt i vores "stil. css" fil, så det er det eneste, der skal udarbejdes,.,, finder denne linje:,, returnerer gulp. src (. /src /*. css), og ændrer den til:, vender src - (gisp.. /src /stil. css), import - stik af anvendes:,,,, postcss import af maxime thirouin:   https://github.com/postcss/postcss-import,,, det er den samme stik af, vi brugte i "for minification og optimering" forelæsning, og det er også anvendes i precss, så du kan være bekendt med det på dette punkt.,, installere stik af i dit projekt, så i din "src" mappe, skabe et dossier, der hedder "_vars. css" og tilføje nogle grundlæggende prøve kode til det.vi har ikke tilføjet variabler funktionalitet endnu, så bare lige css, f.eks.:,,. test (baggrund: sort}, nu importerer deres nye variabler, sag i deres vigtigste "src /stil. css" fil ved at tilføje denne kodeks i første linje:,, @ import "_vars".,, samle din kode, tjek din "best /stil. css" fil, og du ser det nu indeholder koden fra din "_vars. css" fil, tilsættes mixins,,, mixins stik af anvendes:,,,, postcss mixins af   andrej sitnik:   https://github.com/postcss/postcss-mixins,,,, note stik af.  , skal være gennemført inden postcss indlejrede og postcss simpelt vars plugins, som vi vil bruge.  , gå og installere postcss mixins derefter tilføjes følgende kode til din "src /stil. css" fil:,, @ definere mixin ikon $netværk, $farve (. knap. $(net) (baggrund billede: url ('img /$(net). men heller ikke dér er menneskene sikre); baggrund farve: $farve;}} @ mixin ikon twitter, blå,,, efter udarbejdelse af din "- /stil. css" følgende tilføjes til den udarbejdet kode:,,. button.twitter {baggrund billede: url ('img /twitter. men heller ikke dér er menneskene sikre); baggrund farve: blå,),   postcss mixins   stik af, vi bruger her, er de samme, som  , der anvendes i precss.vi gik over  , hvordan man bruger det   i læren om precss,   så fuldstændige oplysninger om dens syntaks tjek "mixins" del af den forrige lektion.,,, andre mixin stik af   muligheder:,,,, postcss sassy mixins af andy jansson:   https://github.com/andyjansson/postcss-sassy-mixins,,, hvis du foretrækker at bruge sass syntaks ved at skabe mixins, tjek andy jansson er   postcss sassy mixins   stik af,  , der virker på samme måde som   postcss mixins  , men med syntaks  , @ mixin, at definere en mixin og @ omfatter, for at bruge et.,,, tilføje "til" loops.,, "til" loops   stik af anvendes:,,,, postcss af   anton yakushev:   https://github.com/antyakushev/postcss-for,,,,,:   postcss for   stik af, er en anden, der  , skal være gennemført inden     postcss indlejrede and postcss-simple-vars.,,,Install the postcss-for plugin, then test it’s working as expected by adding this code to your “src/style.css” file:,,@for $i from 1 to 3 { \tp:nth-of-type($i) { \t\tmargin-left: calc( 100% /$i ); \t} },,It should compile to give you:,,p:nth-of-type(1) { margin-left: calc( 100% /1 ); } p:nth-of-type(2) { \tmargin-left: calc( 100% /2 ); } p:nth-of-type(3) { \tmargin-left: calc( 100% /3 ); },,Once again, the plugin we’re using to add ,@for, loops is the same as is used in PreCSS, so for extra information on its syntax check out the “Loops” section in the previous tutorial.,,,,Other “for” Loop Plugin Options:,,,,Fork of postcss-for by Anton Yakushev: https://github.com/xori /postcss,,,   postcss for   stik af skal løbe, før   postcss simpelt vars, hvilket betyder, at der ikke er mulighed for at   anvendelse   variabler, der spænder du vil have din, @ for brug, iterate igennem.  , hvis det er et problem, kan du i stedet bruge denne gaffel af postcss for stik af, der i stedet burde være lastet, efter den postcss simpelt vars plugins.  , fordi det løber efter variabler er evalueret, du er fri til at fastsætte forskellige variabler, vil du have din  , @ for brug, iterate gennem   som  :,, @ fra: 1; @ tæller: 3; @ for $jeg fra @ fra @ tæller (p: n - type ($) {margen: calcium (100% /%);), tilsættes variabler, skal vi tilføje to mulige variabler til vores preprocessor, både af der kan være meget handy.   første anvender sass som syntaks, og den anden bruger syntaks af   css skik egenskaber, også kendt som css variabler.,,, variabler plugins anvendes:,,, postcss simpelt vars af   andrej sitnik:   https://github.com/postcss/postcss-simple-vars, postcss css variabler, som   eric eastwood:   https://github.com/madlittlemods/postcss-css-variables, installere disse to plugins, så vi tester hver en af gangen.,, først skal vi prøve den frækhed, som syntaks af postcss simpelt vars.   åbne "_vars. css" fil, du tidligere har fremsat, ikke dens indhold og tilføje følgende kode:,, $default_padding: 1rem;,, tilføjes følgende til din "src /stil. css" fil og recompile:,,,. post (polstring: $default_padding;}, skal det indsamle give -u:,,. post (polstring: 1rem;}, nu skal vi teste css skik egenskaber som syntaks af postcss css variabler.der tilføjes følgende kode til   din "src /stil. css" fil:,,: grundlæggende {- h1_font_size: 3rem;} h1 (skriftstørrelse: var (... h1_font_size)} @ medier (max bredde: 75rem) (h1 {- h1_font_size: 4vw;}}, bør den udarbejde:, h1 - (skriftstørrelse: 3rem;} @ medier (max bredde: 75rem) (h1 (skriftstørrelse: 4vw;}}, bemærket, at når ved hjælp af css variabler, havde vi kun at ændre værdien af det, - - h1_font_size, variable inden for medierne og den produktion, der automatisk søgning, skriftstørrelse - ejendom.dette er især nyttige funktioner.,,, hvorfor bruge begge former for   variabler?,,, før jeg går videre, vil jeg nævne, at den fremgangsmåde, der er benyttet i denne lektion er ikke den tilgang, de har, til at tage.hvis du ønsker at bruge   en slags variabel, og ikke den anden, det er helt fint. efter min opfattelse grunden til, at jeg kan lide at bruge begge former for variabler   er jeg bruger dem i to   forskellige måder.jeg vil typisk anvendelse css skik egenskaber syntaks i min vigtigste stylesheet, mens jeg siger som variabler i min delvise filer.,, det lader mig fastsat css skik egenskaber for den type af variabler, jeg kan bruge i et levende projekt, hvis /når de bliver støttet på tværs af browsere.- som du så i ovenstående eksempel, de har også visse funktioner, der nu som variabler ikke.,, jeg kan bruge sass som variabler for ting, der ikke hører hjemme i en levende stylesheet, især dem, der eksisterer rent   skal forarbejdes, gennem ting som hver loops,   hypoteser, og andre ændringer. andre variabler, stik af   muligheder:,,, postcss avancerede variabler af jonathan -   https://github.com/jonathantneal/postcss-advanced-variables,, som et alternativ til anvendelse af postcss simpelt vars du måske gerne vil overveje at bruge   postcss avancerede variabler, stik af   anvendes som en del af precss pakke.  , er dette også en fremragende mulighed, med den primære forskel er, at det tager sig af hypoteser, løkker   og variabler, al.l   i samme stik af.for mig, er grunden til, at jeg i dag vælge postcss simpelt vars er jeg foretrækker at have hypoteser, der kommer fra en særskilt stik af. postcss hypoteser, som dækker vi kort.,,, postcss skik egenskaber ved   maxime thirouin:   https://github.com/postcss/postcss-custom-properties,,, i stedet for at bruge postcss css variabler, ville du foretrække   postcss skik egenskaber.  , den afgørende forskel mellem de to er   postcss skik egenskaber   svarer nøje til w3c spec for skik egenskaber, så du kan være sikker på, at du skriver kun korrekt fremtidige css.   på den anden side   postcss css variabler giver ekstra funktionalitet, men det gør den ikke gør krav på at have fuldstændig ligestilling med spec., jeg vælger postcss css variabler becfordi jeg bruger det i forbindelse med preprocessing, når jeg skriver en masse af ikke - kode alligevel.som sådan   - jeg vil hellere have den ekstra funktionalitet over 100% - overholdelse.,, hvis du bruger variabler i forbindelse med at skrive fremtidige css, finder du måske postcss skik egenskaber er en bedre egnet til dig.,, tilføje "hver"   loops,,, "" loop   stik af, der anvendes:,,,, postcss hver af   alexander madyankin:   https://github.com/outpunk/postcss-each, installere   postcss hver   stik af så tilføje denne variabel koden til din "_vars. css" fil:,, $sociale: twitter og facebook, youtube. denne kodeks indeholder en definition, der opbevares i de $sociale, variabel.,, nu er vi ved at skabe en  , @ hver sløjfe til iterate gennem de værdier, opbevares i vores   $sociale, variabel.   tilføje denne kodeks til din "src /stil. css" fil:,, @ hver $ikon i ($sociale) {. ikon -$(ikon) {baggrund: url ('img /$(ikon). men heller ikke dér er menneskene sikre)}}, vores, @ hver, loop er klar, men før vi kan samle det vi skal lave et lille konfiguration ændring af muligheder for postcss simpelt vars.  , vil du se at det i koden   ovenfor, vi bruger   $ikon,   til at repræsentere den aktuelle værdi er vi iterating igennem.   nogle problemer kan opstå som følge af denne  , fordi postcss simpelt vars stik af ser ud til   $, tegn, med henblik på at identificere   variabler, betyder det, at den vil se, $ikon,,,   tror,  , det er en variabel, forsøge at behandle det, så se   det ikke har en værdi.det vil stoppe det, indsamle og log en fejl til hinanden, at det er fundet en udefineret variabel.,, at løse dette ønsker vi at tilføje muligheden, stille: det er rigtigt, at vores muligheder for stik af.det betyder, at hvis det opdager en udefineret variabel, det vil ikke stoppe indsamlingen af at registrere en fejl, det vil bare fortsætte.det vil ikke blive generet af tilstedeværelsen   $ikon, i vores @ hver, og vi vil være i stand til at udarbejde succes., i forarbejdningsvirksomhederne vifte af din gulpfile eller gruntfile, fastsatte mulighed: /* gulpfile * /simple_vars ({stille: sande}) /* gruntfile * /kræver ('postcss-simple-vars') ({stille: sande}), nu udarbejde deres css og du skulle få:,,,. ikon twitter {baggrund: url ('img /twitter. men heller ikke dér er menneskene sikre)}. ikon facebook {baggrund: url ('img /facebook. men heller ikke dér er menneskene sikre)}. ikon - youtube {baggrund: url ('img /youtube. men heller ikke dér er menneskene sikre)}, andre "hver" loop - stik af   muligheder:,,, postcss avancerede variabler af jonathan -   https://github.com/jonathantneal/postcss-advanced-variables,,, som tidligere nævnt, postcss avancerede variabler er endnu en fremragendestik af valg, der tager sig af variabler, sløjfer og hypoteser i.,, tilføje hypoteser, hypoteser, stik af anvendes:,,,, postcss hypoteser, som andy jansson:   https://github.com/andyjansson/postcss-conditionals,,, jeg nævnte tidligere, at det stik af er min præference for håndtering af hypoteser.det er, fordi jeg mener, at det er i stand til at klare mere komplekse betinget kontrol.det omfatter støtte til @ andre, hvis syntaks, du må prøve på flere betingelser i et enkelt stykke kode.,,, efter montering af postcss hypoteser, stik af, teste det ved at tilføje denne kodeks til din "src /stil. css" fil:,, $column_count: 3. kolonne (@, hvis $column_count = = 3 (bredde: 33%; flyde: venstre} @ andre, hvis $column_count = = 2 (bredde: 50%; flyde: venstre} @ andet (bredde: 100%), og denne kodeks vil kontrollere den værdi, vi har fastsat i de variable  , @ column_count og output forskellige bredde og flyde værdier afhængigt af, hvad det er.det virker på samme måde som den kode, vi brugte i den foregående preprocessing   forelæsning, men nu, hvor vi har mulighed for at bruge, @ andre, hvis budgetposter, vi har været i stand til at øge antallet af betingelser, vi tester fra to til tre, efter recompiling dette burde give dig:,,. kolonne (bredde: 33%; flyde: venstre}, prøv   ændrede  , $column_count,  , 2, eller  , 1, og udarbejdelse af   igen for at se, hvordan det ændringer css produktion, kan vi også benytte disse typer af hypoteser, godt inde i mixins, som vi yderligere støtte tidligere.vi kan f.eks. skabe en mixin at generere kolonne layout kode, som så:,, @ definere mixin kolonner $tæller {@ hvis $tæller = = 3 (bredde: 33%; flyde: venstre} @ andre, hvis $tæller = = 2 (bredde: 50%; flyde: venstre} @ andet (bredde: 100%). another_column {@ mixin kolonne 2}, vil dette give produktionen:,,. another_column (bredde: 50%; flyde: venstre}, andre hypoteser,   muligheder:,,, postcss avancerede variabler af jonathan -   https://github.com/jonathantneal/postcss-advanced-variables,,, som nævnt tidligere, postcss avancerede variabler, er endnu et stik af mulighed, der tager sig af variabler, sløjfer og hypoteser i.,, tilføje calc() til matematik,,, calc() stik af anvendes:,,,, postcss calcium ved   maxime thirouin:  https://github.com/postcss/postcss-calc,,, i en tidligere lektion vi plejede postcss calcium via cssnano, bidrage til at gøre i tilfælde af  , calc(), anvendes mere effektivt.i forbindelse med preprocessing, men det kan være meget nyttig, når vi skal bruge matematik i vores stylesheets.  , gå og installere postcss calcium, så skal vi teste det ved at spalte generation mixin tilføjede vi over mere effektive.  , lige nu er vi ved hjælp af hypoteser til se, om mixin er   $tæller,   argument er, at enten  , 1, 2 eller 3,   så outputting en tilsvarende forud beregnede bredde.   i stedet, vi bruger, calc(), automatisk produktion ret bredde for vores kolonne kode, uanset hvad nummer er passeret gennem mixin.,, tilføje til din "src /stil. css" fil:,,, @ definere mixin columns_calc $tæller (bredde: calcium (100% /$tæller); @ hvis $tæller > 1 {flyde: venstre}}. column_calcuarbejdere (@ mixin columns_calc 2}, i stedet for hårdt, kodning   procentdelen bredder, vi havde brug for visse antallet af søjler, er vi nu ved beregningen af det i luften.  ,, postcss kalk - stik af vil omvende  , bredde: calcium (100% /$tæller), til en statisk størrelse, afhængigt af om værdi vedtaget, når vi kalder mixin, i dette tilfælde 2,.,, recompile din kode, og de bør se dette output:,,. column_calculated (bredde: 50%; flyde: venstre},,,,,,, postcss calcium: dér, hvor det kan løse, calc(),   en statisk pris på det vil produktionen i din kode.hvis den ikke kan, det vil ikke ændre noget,  , så du kan bruge, calc() for værdier, der skal behandles på browser på runtime.,, tilføje rede,,, redebygning stik af anvendes:,,,, postcss indlejrede af   andrej sitnik:   https://github.com/postcss/postcss-nested,,, redder vi bruger samme stik af, som anvendes i precss pakke, så du kan vende tilbage til den tidligere ministeriet for fuld information om syntaks.  , installere   postcss indlejrede   så prøve at alt fungerer korrekt ved udarbejdelsen af denne kode:,,. menu (bredde: 100%; en (tekst): ingen;}}, din, der følger css bør være:,,. menu (bredde: 100%} menu et (tekst): ingen;}, tilsættes udvider, udvider stik af anvendes:,,,, postcss frækhed, udvide af jonathan -   https://github.com/jonathantneal/postcss-sass-extend,,, udvider, vi vil bruge den   postcss frækhed, udvide   stik af.det   vil give os forskellige syntaks til anvendelse, end at vi dækket i vores tidligere tutorielle   arbejde med precss.i stedet for rækker, der er fastlagt med  , @ definere udvide extend_name (...),   defineres de med  ,% extend_name (...),.,, de er stadig bruges med det samme i   syntaks, @ udvide% extend_name,,.,, konstaterer, at den postcss frækhed, udvide   stik af faktisk skibe med precss, men jeg går ud fra, at det ikke belastning af misligholdelse, som da jeg forsøgte at bruge de nødvendige syntaks ikke udarbejde.,,, efter montering af   postcss sass udvides til dit projekt, afprøve det med følgende kode:,,% rounded_button {grænse radius: 0.5rem; polstring: 1em; kantbredde: 0.0625rem; grænseoverskridende stil: faste;}. blue_button {@ udvide% rounded_button; grænseoverskridende farve:f74d1; baggrund farve:b8eff.}. red_button {@ udvide% rounded_button; grænseoverskridende farve:&#c41a1e; baggrund farve:&#ff2025;}, skal det indsamle i:,,. blue_button,. red_button {grænse radius: 0.5rem; polstring: 1em; kantbredde: 0.0625rem; grænseoverskridende stil: faste;}. blue_button {grænse farve:f74d1; baggrund farve:b8eff;). red_button {grænse farve:&#c41a1e; baggrund farve:&#ff2025;}, andre udvide stik af   muligheder:,,, postcss udvide:   https://github.com/travco/postcss-extend, postcss simpelt udvide:   https://github.com/davidtheclark/postcss-simple-extend,,,,, så vidt vi har styr på, hvad der kunne anses for grundlæggende egenskaber er fælles for de fleste preprocessors.der er imidlertid stadig mere plugins, der er til rådighed til at tilbyde ekstra karakteristika;   nogle af disse elementer er   findes i andre   preprocessors, og du er nødt til at gå til postcss at finde.vi vil gennemgå disse ekstra muligheder kort nu.,, farve manipulation,,, plugins:,,, postcss farve funktion ved   maxime thirouin:   https://github.com/postcss/postcss-color-function, postcss farve alpha, som   ivan vlasenko:   https://github.com/avanes/postcss-color-alpha, postcss farve skala af   kristofer joseph:   https://github.com/kristoferjoseph/postcss-color-scale, evnen til at ændre farver kan være   en af de mest nyttige elementer i   preprocessors.   der er faktisk flere farver plugins for postcss, men det er tre  , der befinder sig især hjemme i en preprocessing fælde.de giver mulighed for forskellige farver forandringer, herunder   lettelse, mørkere, mætter, at alfa - værdier og mere.,, ejendom, definitioner, stik af:,,,, postcss definere ejendom ved   dale eidd:   https://github.com/daleeidd/postcss-define-property, funktionalitet, der tilbydes af dette stik af kunne sammenlignes med   sømløse mixins af stylus, hvorved i stedet for at bruge en syntaks, som  , @ mixin,, du definerer bidder af kode på en sådan måde, at de kan derefter anvendes kode på samme måde som   en indfødt   ejendom, f.eks.  , /* fastlægge en ejendom * /størrelse: $størrelse (højde: $størrelse; bredde: $størrelse;} /* bruger det som en indfødt ejendom * /.. {størrelse: 50px;}, stik af, kan også anvendes til at omdefinere oprindelige egenskaber til dine behovs, ejendom lookup, stik af:,,,, postcss ejendom lookup af simon smith:   https://github.com/simonsmith/postcss-property-lookup,,, ejendom lookup indgår i stylus, som kan være meget nyttige.det giver dig mulighed for at lookup værdien af en ejendom i samme stil.for eksempel, du kan sætte en margen svarende til venstre med:  , margen: 20px; margen: @ margenen;,,, indlejrede egenskaber, stik af:,,, postcss indlejrede rekvisitter fra jed mao:   https://github.com/jedmao/postcss-nested-props,,, mens de regelmæssige redebyggeri - vi dækkede over unwraps udvælgere, postcss indlejrede rekvisitter stik af unwraps indlejrede egenskaber, f.eks.:,, origincal /* * /. element (grænse (bredde: 1px; stil: faste, farve:&#ccc;) /* efter forarbejdning * /. element (kantbredde: 1px; grænseoverskridende stil: faste, grænse - farve:&#tsr;), svarede til, stik af:,,,, postcss kamp ved at   ryan tsao:   https://github.com/rtsao/postcss-match, matchende giver dig en anden måde at udføre tilstandproblemer med kontrollen, denne gang med rust som mønster match, noget lignende for at skifte erklæringer i javascript eller folkesundhedsprogrammet.dette kan give en mere effektiv måde at kontrollere flere betingelser, end at skrive mange @, hvis andre kontroller.,, css sprite generation, stik af:,,,, postcss ånder af   viktor vasilev:   https://github.com/2createstudio/postcss-sprites, css sprite generation, et populært træk i kompas, kan også ske gennem postcss holdt stik af.de stik af vil scanne dit css for billeder, kombinere de billeder til en sprite blad og opdatere din kode, som kræves for at vise de nye sprite blad korrekt., mange flere muligheder, er der for øjeblikket en meget robust liste af sprog, udvidelse plugins at vælge fra, mere end vi kan dække her. tjek den fuldstændige liste:   https: //////////////////////github. kom postcss postcss&#sprog forlængelser, kommer snart: alternative syntaxes, for mange mennesker i stand til at skrive i korte, effektiv syntaks (typisk sans semikoloner og curly bøjle)   er en af de store appel af preprocessors som stylus eller sass.den nyligt løsladte version 5.0 af postcss nu støtter skik parsers, som vil gøre det muligt for nye syntaxes støttes.sugarss skal den lakoniske syntaks parser, og drøftelserne i dag er åbne om, hvordan denne syntaks struktureres.,, du kan altid sige dit eget, postcss stadig er relativt ny, og de kan finde, er der noget, du vil opnå med jeres skik preprocessor, for hvilke der er i øjeblikket ikke stik af.det gode ved det modulopbyggede økosystem, er, at de har mulighed for at løse dette problem, selv ved at skabe deres egne stik af.nogen kan gøre det, og den hindring for adgangen til markedet er langt lavere end at prøve at tilføje andre funktioner, stylus, være næsvis eller mindre.vi skal lære i et senere tutor.,, i næste lektion, behøver du ikke at vælge mellem precss og rullende din egen preprocessor, hvis du ønsker at bruge postcss.du kan vælge ud af postcss baseret preprocessing helt, hvis du vælger i stedet at bruge det side om side med din favorit preprocessor., i næste lektion vil vi lære at bruge postcss sammenholdt med stylus, være næsvis eller mindre.se, du der!