Hittills har vi använt PostCSS för att göra saker som att optimera stylesheets, lägga till funktionalitet för förbehandling och generera vissa klassnamnkonventioner, men hur kan det bara vara att skriva vanligt gammalt CSS?
Det finns så många små bitar av kod som den genomsnittliga webbdesignern typer ut tusentals gånger under karriärens gång, och om du bara kan få lite tid tillbaka på var och en lägger det till mycket i slutet.
I denna handledning kommer vi att använda PostCSS för att skära ner på varje dags kodtider via en serie genvägar och korttilläggstillägg. Låt oss börja!
Ställ in ditt projekt
Du kommer att känna till denna process redan nu, men det första du behöver göra är att ställa in ditt projekt för att använda antingen Gulp eller Grunt. 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 ändamål, så du borde hitta det lite enklare att arbeta med.
Du kan läsa om hur du konfigurerar Gulp eller Grunt-projekt för PostCSS i de tidigare handledningarna
PostCSS Quickstart Guide: Gulp Setup eller
PostCSS Quickstart Guide: Grunt Setup
respektive.
Om du inte vill installera ditt projekt manuellt 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 kör kommandot med en terminal eller kommandotolk som pekas på mappen npm installera.
Installera insticksprogram
För denna handledning installeras vi flera plugins, var och en hanterar en annan typ av genväg eller stenografi.
Oavsett om du använder Gulp eller Grunt, kör följande kommando i din projektmapp för att installera plugins som vi ska använda:
Om du använder Gulp, lägg till dessa variabler under de variabler som redan finns i filen:
var alias = kräver ("postcss-alias"); var crip = kräver ('postcss-crip'); var magiker = kräver ("postcss-font-magician"); var triangle = kräver ('postcss-triangle'); varcirkel = kräver ("postcss-cirkel"); var linkColors = kräver ("postcss-all-link-colors"); var center = kräver ("postcss-center"); var clearfix = kräver ("postcss-clearfix"); var position = kräver ("postcss-position"); var size = require ("postcss-size"); var verthorz = kräver ("postcss-verthorz"); var colorShort = kräver ('postcss-color-short');
Lägg nu till var och en av de nya variabla namnen i din processorer array:
var processorer = [alias, crip, trollkarl, triangel, cirkel, linkColors, center, clearfix, position, storlek, verthorz, colorShort];
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.
Ladda pluggar via Grunt
Om du använder Grunt, uppdatera processorer objekt som är nestat under alternativ objekt till följande:
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.
Okej, nu är dina plugins alla installerade låt oss lära oss hur du använder dem för CSS genvägar och stenografi.
Använd stenografi för egenskaper
Det finns många egenskaper vi måste skriva om och om igen och över igen i CSS. Visst är den tid det tar att skriva en handfull karaktärer en gång, väldigt liten, men över årens utveckling lägger allt upp. Vi ska titta här på två plugins som gör att du kan trimma dessa egenskaper ner till shorthand versioner så att du kan få ett snabbt och jämnt flöde som du hamrar ut din CSS.
Definiera din egen stenografi
Postcss-alias-plugin från Sean King kan du definiera din egen stenografi eller "alias" för alla egenskaper du vill förkorta. Detta ger dig ett sätt att se till att den stenografi du använder passar det sätt som ditt sinne fungerar och är därför lätt för dig att komma ihåg.
För att definiera några alias lägger du till en åtgärd högst upp i ditt stilark med syntaxen @alias .... Sedan ställer du in aliaserna genom att lägga till alias-namn: egenskapsnamn;.
Lägg till följande exempel i filen "src / style.css", som kommer att ange alias för border-storlek, border-style och gräns färg egenskaper:
Läs mer om postcss-alias på: https://github.com/seaneking/postcss-alias
Plug 'n' Play Shorthand
Om du vill använda en hel del fastighetsskorthandlingar, men du inte vill gå igenom stegen för att definiera var och en själv, kan du kolla in plugin-postcss-crip av Johnie Hjelm som har hundratals förkortningar för förberedelserna redo för plugin och spela använd.
Till exempel lägg till följande kod till din "src / style.css" -fil, som innehåller stenografi för margin-top, margin-höger, margin-bottom och margin-vänster egenskaper:
Läs mer om postcss-crip på: https://github.com/johnie/postcss-crip
Och se hela listan över förkortningar på egendom på: https://github.com/johnie/crip-css-properties
Output @ font-face i One Line
Postcss-font-magiker plugin av Jonathan Neal lever mycket upp till sitt namn. Det låter dig använda anpassade teckensnitt via en enkel typsnittsfamilj regera som om du använde en vanlig typsnitt, och teckensnittet kommer bara att fungera magiskt.
Lägg till följande kod i din "src / style.css" -fil:
kropp font-family: "Indie Flower";
Det är allt. Det är allt som krävs för att använda postcss-font-magiker. Ingen speciell syntax, använd bara teckensnittsnamnet som du skulle något annat.
I det här fallet är Indie Flower-teckensnittet ett som jag har valt från Google Fonts-biblioteket. Jag har inte lagt till några anpassade typfiler till mitt projekt, så plugin kommer att se det och istället gå och kolla för att se om mitt specificerade teckensnitt är tillgängligt från Google Fonts. När den finner att den är tillgänglig, kommer den att skapa den lämpliga @ Font-face koden helt automatiskt.
Kompilera din fil och kolla sedan på din "dest / style.css" -fil, där du får se den här koden har lagts till i:
@ font-face font-family: "Indie Flower"; typsnittstyp: normal; font-vikt: 400; src: local ("Indie Flower"), lokal (IndieFlower), url (// fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nZ2MAKAc2x4R1uOSeegc5U.eot?#) format ("eot"), url (// teckensnitt. gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2) format ("woff2"), url (// fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff) format ("woff" );
Du kan kontrollera att teckensnittet laddas korrekt genom att skapa en ny fil i din "dest" -mapp med namnet "index.html" och lägga till den här koden till den:
Testrubrik
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium bibendum nisl. Mauris eget orci eget nisi tristique lobortis. Pellentesque rutrum id ligula quis tempus. Vivamus tempus, precis i semper volutpat, precis som du är i din mamma, i mattis lorem dolor condimentum diam. Ut för att du ska kunna använda dig av det här alternativet. Aenean effektivitet effektivitet. Vivamus leo felis, semper quis rutrum eu, eleifend eu quam.
För att teckensnitt ska laddas måste du se den här filen via en http: // adress, snarare än a fil:// adress, så antingen ladda upp filen till en webbhotell eller använd en app som Prepros för att skapa en live förhandsvisning.
Du bör se Indie Flower-teckensnittet som är applicerat på all din text, som så:
Läs mer om postcss-font-magiker här: https://github.com/jonathantneal/postcss-font-magician
Skapa CSS-former
Om du någonsin har använt ren CSS för att skapa former, vet du att det kan vara ett bra sätt att inkludera saker som cirklar och trianglar i dina mönster, men det kan också vara ganska knepigt. Särskilt när det gäller trianglar, att bestämma vilken kod du behöver för att få en form orienterad i rätt riktning i rätt storlek kan känna sig något mot intuitiv.
Det är där postcss-cirkeln och postcss-triangeln plugins av Jed Mao kommer till undsättning. Båda pluginsna skapar en förenklad syntax och ett intuitivt sätt att skapa cirklar och trianglar med ren CSS.
Lägg till en cirkel
Använd syntaxen för att skapa en cirkel cirkel: storlek färg;. Lägg till följande kod i din "src / style.css" -fil:
.cirkel cirkel: 8rem # c00;
Kompilera det och du får se följande kod till din "dest / style.css" -fil:
Lägg nu till den här HTML-filen i filen "dest / index.html" som du skapade i det sista avsnittet:
Ta en ny titt på din fil i en webbläsare och du ska nu se en röd cirkel:
Läs mer om postcss-cirkeln på: https://github.com/jedmao/postcss-circle
Lägg till en triangel
Det finns tre typer av triangeln du kan lägga till med hjälp av det här pluginet. isosceles, right-isosceles och equilateral. Varje har lite olika uppsättningar syntax, som du kan läsa om i sin helhet vid plugins Github repo.
Vi går igenom att lägga till en isosceles-triangel, vars syntax är:
För att se triangeln i filen "dest / index.html" lägg till den här html:
När du uppdaterar den här filen i din webbläsare, ska du nu se en röd isosceles triangel som pekar mot höger:
Läs mer om postcss-triangle på: https://github.com/jedmao/postcss-triangle
Använd genvägar för vanliga uppgifter
Ange Länk Styling
Inställning av färger för länkar är ett jobb som måste göras i varje projekt och kräver inställningsstilar för standardlänkar samt fyra olika länktillstånd. Plugin för postcss-all-link-färger från Jed Mao låter dig genväga den processen, utfärda färgerna för alla dina länkar samtidigt.
Lägg till följande i ditt "src / style.css":
en @ länk-färger alla # 4D9ACC;
Kompilera sedan din fil och du får se att alla obligatoriska länkstatus har blivit inställda:
Du har också möjlighet att skapa en annan färg för en viss stat. Lägg bara till några lockiga axlar i slutet av regeln, och inuti använder du syntaxen tillstånd: färg;.
Uppdatera koden som du just lagt till i filen "src / style.css" till följande:
en @ länk-färger alla # 4D9ACC svep: # 5BB8F4;
Nu när du sammanställer ser du att svävarstaten har en annan färg än resten av stilerna:
Läs mer om postcss-all-link-färger på: https://github.com/jedmao/postcss-all-link-colors
Centrum vertikalt eller horisontellt
Centrering, antingen vertikalt eller horisontellt, är en av de uppgifter som är en evig torn i sidan av CSS-utvecklare. Jed Maos postcss-center plugin gör uppgiften mycket enklare med introduktionen av topp: center; för vertikal centrering, och vänster: center; för horisontell centrering.
Lägg till den här koden i din "src / style.css" -fil:
Notera: centreringen använder absolut positionering, så du måste pakka in dina centrerade element med en förälder som använder relativ, absolut eller fast positionering. Med tanke på helt placerade element påverkar inte föräldrarnas höjd eller bredd, du vill också ställa in höjden och bredden på moderelementet för att passa.
Till exempel lägg till vänster: center; till .cirkel klass du skapade tidigare så det kommer att vara horisontellt centrerat:
.cirkel cirkel: 8rem # c00; vänster: center;
Lägg sedan till denna andra klass för att fungera som ett omslag runt cirkeln, vilket ger den relativa positioneringen och en höjd som matchar cirkeln:
.circle_wrap position: relative; höjd: 8rem;
Lägg nu till ett element som bär den här klassen som ett omslag runt din befintliga cirkel html:
När du går tillbaka och uppdaterar din sida ska du se att din cirkel har centrerats horisontellt:
Läs mer om postcss-center på: https://github.com/jedmao/postcss-center
Output Clearfix i en rad
I vilken form som helst som innehåller flottörer är det så praktiskt att skapa en clearfix-klass att det bara handlar om att vara väsentligt. Sean Kings plugin för postcss-clearfix gör att du skapar clearfix-styling i ett enstaka jobb genom att lägga till fixera som ett möjligt värde som kan användas med klar fast egendom.
För en clearfix som kommer att fungera på IE8 + lägg till följande i filen "src / style.css":
.clearfixed clear: fix;
Vid sammanställning ser du att den har producerat följande clearfix-kod, klar för användning:
.clearfixed: efter content: "; display: table; clear: both;
Om du behöver en clearfix som fungerar på IE6 + använd värdet fix-legacy istället för vanligt fixera, såhär:
.clearfixed_legacy clear: fix-legacy;
När den här koden sammanställs ser du att den innehåller lite extra innehåll som gör den användbar för äldre webbläsare:
.clearfixed_legacy: före, .clearfixed_legacy: efter content: "; display: table; .clearfixed_legacy: efter clear: both; .clearfixed_legacy zoom: 1;
Läs mer om postcss-clearfix på: https://github.com/seaneking/postcss-clearfix
Ställ placering i en rad
När du vill använda icke-standardpositionering, dvs. absolut, fast eller släkting, du måste skriva ut värdena för elementets topp, höger, botten och vänster positionering manuellt. Det finns ingen stenografi som du kan använda när du ställer in marginaler eller vadderar i en rad. Det vill säga tills du installerar Sean Kings postcss-position plugin.
Med denna plugin, när du använder placera egendom, efter att ha satt ett värde på absolut / fast / släkting, du kan deklarera topp, höger, botten och vänster värden i samma linje.
Lägg till följande exempelkod till din "src / style.css" -fil:
.absolut position: absolut 1rem 1rem 0 0;
Efter sammanställningen ser du stenografi har sammanställt i separata linjer som du normalt skulle skriva ut manuellt.
Hur dessa värden deklareras har samma mönster som i marginal eller stoppning stenografi, dvs du kan också ställa upp och ner i det första värdet, sedan höger och vänster i det andra, eller du kan ställa in ett värde som gäller för alla fyra.
Testa till exempel följande kod:
.fixed_two_values position: fixed 2rem 1rem; .relativ_on_värde position: relativ 3rem;
Läs mer om postcss-position på: https://github.com/seaneking/postcssposition
Ställ in bredd och höjd vid en gång
Stödinställningen för postcss-storlek av Andrey Sitnik gör att du kan krossa de ofta använda bredd och höjd egenskaper ner i en enda storlek fast egendom. Du kan använda den på två sätt: att skicka två värden med den första utvärderingen till bredden och den andra till höjden eller passera ett värde som används för både bredd och höjd.
Testa detta genom att lägga till följande CSS i din "src / style.css" -fil:
Läs mer om postcss-storlek på: https://github.com/postcss/postcss-size
Ställ in vertikal och horisontell spridning
Som en stor älskare av effektiv kodning, när jag skriver ut marginaler och vadderingar, som ofta är lika på två sidor, har jag ofta befunnit mig att önska att det var en genväg för att deklarera vertikalt och horisontellt avstånd samtidigt. Jag skrev till och med några förprocessor mixins att göra just det. Men jag behöver inte mixins längre tack vare postcss-verthorz-plugin av David Hemphill.
Med det här pluginet kan du använda padding-vert eller margin-vert för att ställa in vertikalavstånd, och padding-horz eller margin-horz för att ställa in horisontellt avstånd. Lägg till följande exempelkod till din "src / style.css" -fil för att se detta fungera:
.avstånd padding-vert: 1rem; marginal-horz: 2rem;
Efter sammanställningen ser du att dessa regler har utökats till fullständiga vadderingar och marginaldeklarationer.
Du kan även genomsöka dessa egenskaper ytterligare genom att förkorta dem till två bokstäver. Exempelkoden som vi använde ovan kan förkortas till följande och utgången skulle vara exakt densamma:
.spacing_short pv: 1rem; mh: 2rem;
Läs mer om postcss-verthorz på: https://github.com/davidhemphill/postcss-verthorz
Output Color Codes
Min favorit standardtextfärg är # 232323 och jag vet inte om det bara är jag, men jag blir trött på att hamra ut samma två siffror om och om igen. Jag ville ofta att det fanns en genväg som liknar hur du kan trimma #ffffff ner till #fff. Med den postcss-färg-korta plugin av Andrey Polischuk finns det.
När du använder det här pluginet, om du anger en tvåsiffrig färgkod, upprepas dessa siffror tills en sexsiffrig kod skapas, t.ex.. # 23 kommer att bli # 232323. Om du anger en siffrig färgkod, kommer den att upprepas tills det finns tre siffror, t.ex.. #F kommer att bli #fff. Du kan även använda den för att ställa in RGBA () färger, där den första siffran du skickar kommer att upprepas tre gånger och den andra används som alfabet, t.ex.. rgba (0, 0,5) kommer att bli rgba (0, 0, 0, 0,5).
Lägg till följande i filen "src / style.css" för att försöka alla ovanstående:
Share
Accentsconagua
