Använda CSS preprocessorer med WordPress - vad är de?

Jag har arbetat med WordPress i tre år, men det var först för ett år sedan jag blev seriös om WordPress-utvecklingen. Speciellt är jag passionerad om barntema och spenderar mycket av min tid på att arbeta i temat utveckling.

Under de senaste åren har vi sett ökningen av CSS-förprocessorer - främst verktyg som gör skrivarstilar enklare och gör dem mer underhållbara.

I den här serien ska vi titta på vilka förprocessorer som är tillgängliga, vilka populära som finns och hur vi kan integrera dem i vår temat utveckling.

Där vi är på väg

När det gäller användargränssnittutveckling handlar det inte bara om hur man gör sakerna bra, men det handlar också om att göra sakerna välstrukturerad och så prestanda som möjligt, och jag tror att detta borde vara något som trängs igenom i våra WordPress-projekt , också.

I denna serie planerar jag att ge en liten bakgrund på vilka förprocessorer som är och markera några av nyckelaktörerna i rymden. Jag kommer också att prata om några av de mer populära ramarna. Jag ska sedan gå vidare till mer av ett djupt dyk i MINDER och förklara varför jag föredrar att använda den. Slutligen kommer jag att täcka hur man använder den med CodeKit för att kompilera din CSS för ditt tema.

Om CSS Preprocessors

Som nämnts finns det ett antal CSS-förprocessorer, det vanligaste som är LESS och SASS. Båda är synaktiskt lika och kan dramatiskt öka hastigheten där du kan skriva din CSS.

Det finns några skillnader som deras kompilatorer och tillägg eller ramverk som de kan kombineras med.

MINDRE

MINDER är ett dynamiskt stilarkspråk. Du kan skriva din CSS programmatiskt i en .mindre fil och kompilera din produktion till en .css fil. Samlingsspråket för LESS är JavaScript. Detta är bra eftersom du kan köra kompilatorn på serverns eller klientsidan.

Några av funktionerna i LESS inkluderar:

Variabler - Variabler kan definieras och används i hela filen. Gör en förändring på ett ställe och se den uppdaterad vart den används.
Mixins - Mixins innehåller ett gäng egenskaper från en regelsats till en annan regelsats. Du kan också använda Parametriska Mixins som accepterar argument.
Nested Rules - Nested Rules ger dig möjlighet att använda häckning istället för, eller i kombination med cascading.
Namnrymder - Namnrymder tillåter dig att gruppera dina variabler eller mixins, för organisatoriska ändamål eller bara för att erbjuda lite inkapsling.

Jag kommer att gå in mer i detalj om syntaxen för dessa i nästa inlägg i denna serie.

Två av de mer populära front-end-ramarna som använder LESS är:

bootstrap
ramlösa

SASS

SASS är en förlängning av CSS3. Den har två syntaxer: .SCSS och .sass. .SCSS är den vanligaste syntaxen som används, men den stöder också den äldre indragna syntaxen.

Några av SASS-särdrag är:

Variabler - Variabler kan definieras och används i hela filen. Gör en förändring på ett ställe och se den uppdaterad vart den används som mindre.
Mixins - Mixins tillåter dig att återanvända hela bitar av CSS, egenskaper eller selektorer som LESS
Nesting - Undvik repetition genom att nesta selektörer inom varandra som MINDRE
Selector Arv - Det kan berätta för en väljare att ärva alla stilar av en annan utan att duplicera CSS-egenskaperna. Ej tillgänglig i LESS.

Här är några ramar som inkluderar SASS och SCSS:

fundament
Allvar
ramlösa

Slutsats

CSS Preprocessors är definitivt en växande trend i webbdesign. De kan dramatiskt påskynda den tid du spenderar på att skriva stilar för dina webbplatser.

De kan också hjälpa till med att strukturera din CSS som att du skulle fungera på andra språk som PHP eller JavaScript. Om du inte redan använder CSS preprocessorer i ditt webbprojekt, bör du definitivt överväga det.

Nu när vi har tittat på två av de mer populära förprocessorerna, tar jag en djupare dyka in i MINDER och ge några anledningar till varför jag personligen väljer att använda den i nästa post. Jag kommer också att visa dig hur du kommer igång med att använda CodeKit med dina WordPress-projekt.

Medel

MINDRE
SASS

Koda