Bruke CSS Preprocessors Med WordPress - Hva er de?

Jeg har jobbet med WordPress i tre år, men det var ikke før et år siden at jeg ble seriøs om WordPress-utviklingen. Spesielt er jeg lidenskapelig om barnemessige temaer og bruker mye av tiden min i temautvikling.

I løpet av de siste par årene har vi sett fremveksten av CSS preprosessorer - hovedsakelig verktøy som gjør skrivestiler enklere og gjør dem mer vedlikeholdsbare.

I denne serien skal vi se på hvilke preprosessorer, hvilke populære de er tilgjengelige, og hvordan vi kan integrere dem i vår temautvikling.

Hvor vi er på vei

Når det gjelder brukergrensesnittutvikling, handler det ikke bare om hvordan du får det til å se bra ut, men også om å gjøre ting godt strukturert og så effektivt som mulig, og jeg tror at dette burde være noe som er trukket gjennom i våre WordPress-prosjekter , også.

I denne serien planlegger jeg å gi en liten bakgrunn på hvilke preprosessorer som er og markere noen av nøkkelaktørene i rommet. Jeg vil også snakke om noen av de mer populære rammene. Jeg vil da gå videre til mer av et dypt dykk inn i MINDRE og forklare hvorfor jeg foretrekker å bruke den. Til slutt vil jeg dekke hvordan du bruker det med CodeKit for å kompilere CSS for temaet ditt.

Om CSS Preprocessors

Som nevnt er det en rekke CSS preprosessorer, den mest brukte som LESS og SASS. Begge er synaktisk like og kan dramatisk øke hastigheten der du kan skrive CSS.

Det er noen forskjeller som deres kompilatorer og utvidelser eller rammer som de kan kombineres med.

MINDRE

MINDRE er et dynamisk stilark. Du kan skrive CSS programmatisk i en .mindre fil og kompilere produksjonen din til a .css fil. Samlingsspråket for LESS er JavaScript. Dette er bra fordi du kan kjøre kompilatoren på server side eller klientsiden.

Noen av funksjonene i LESS inkluderer:

Variabler - Variabler kan defineres og brukes i hele filen. Gjør en endring på ett sted og se den oppdatert uansett hvor den er brukt.
Mixins - Mixins inkluderer en haug med egenskaper fra en regelsett til en annen regelsett. Du kan også bruke Parametriske Mixins som aksepterer argumenter.
Nestede regler - Nestede regler gir deg muligheten til å bruke nesting i stedet for, eller i kombinasjon med cascading.
Navnegrupper - Navnegrupper lar deg gruppere variablene dine eller mixins, for organisasjonsformål, eller bare for å tilby litt innkapsling.

Jeg kommer til å gå nærmere på syntaksen for disse i neste innlegg i denne serien.

To av de mer populære front-end rammer som bruker LESS er:

Bootstrap
rammeløs

SASS

SASS er en forlengelse av CSS3. Den har to syntaxer: .SCSS og .sass. .SCSS er den vanligste syntaksen som brukes, men den støtter også den eldre innrykkede syntaksen.

Noen av funksjonene i SASS inkluderer:

Variabler - Variabler kan defineres og brukes i hele filen. Gjør en endring på ett sted og se den oppdatert uansett hvor den er brukt som LESS.
Mixins - Mixins lar deg bruke hele biter av CSS, egenskaper eller selektorer som LESS
Nesting - Unngå repetisjon ved å nesting selektorer innenfor hverandre som MINDRE
Selector Arv - Det kan fortelle en velger å arve alle stilene til en annen uten å duplisere CSS-egenskapene. Ikke tilgjengelig i mindre.

Her er noen rammer som inkluderer SASS og SCSS:

Fundament
Tyngde
rammeløs

Konklusjon

CSS Preprocessors er definitivt en økende trend i webdesign. De kan dramatisk øke tiden du bruker på å skrive stiler for nettstedene dine.

De kan også hjelpe med å strukturere CSS som du vil fungere på andre språk som PHP eller JavaScript. Hvis du ikke allerede bruker CSS preprosessorer i ditt webprosjekt, bør du definitivt vurdere det.

Nå som vi har tatt en titt på to av de mest populære forprosessorer, tar jeg en dypere dykk inn i MINDRE og gir noen grunner til at jeg personlig velger å bruke den i neste innlegg. Jeg vil også vise deg hvordan du kommer i gang med å bruke CodeKit med dine WordPress-prosjekter.

ressurser

MINDRE
SASS

Kode