Hur man kompilerar SCSS med PHP: Lägg till variabler i WordPress Customizer för att kompilera tema-CSS

Denna handledning visar dig hur du lägger till temainställningar, t.ex. temafärger, i WordPress Customizer och kompilerar om temastilarket med de valda variablerna. Genom att ha temastil i SCSS med hjälp av ett bibliotek kan du enkelt tillåta temaanvändare att anpassa alla variabler i temaformatmallen, utan att de själva behöver redigera SCSS-filerna.

Alla bra tema bör tillåta en hel del anpassning. Åtminstone bör det vara möjligt att ställa in huvudtemans färger. Istället för att skriva en massa ful CSS för att åsidosätta temafärgerna överallt, kan du istället kompilera om hela stilarket direkt från Customizer. Denna handledning kommer att lära dig hur!

Vad vi kommer att göra – och vad vi behöver

Jag antar att ditt tema redan har lite styling på gång i SCSS-filer som du redan kompilerar till temats huvud style.css. Och genom att använda SCSS definierar du med största sannolikhet återkommande saker som färger, storlekar eller brytpunkter som SCSS-variabler, och använder dessa variabler genom hela din styling.

Du kan skapa vilka som helst och hur många Customizer-inställningar du vill för variablerna i din SCSS-fil. Colorpickers, nummer och textinmatningar är perfekta för detta. Medan användaren ändrar inställningarna i WordPress Customizer kommer de att se en förhandsvisning av temat med de ändrade variablerna. Och när de klickar på "Spara" kommer den slutliga CSS-en att kompileras till CSS-filen för huvudformatmallen med hjälp av de valda värdena.

Som ett exempel för denna handledning antar jag att temats huvudformatmalls SCSS-fil gör en @importav en variables.scssfil. Där har vi definierat tre variabler som vi vill ska kunna anpassas i Customizer: Två färger och en textstorlek i px.

$main: #594c74 !default;
$secondary: #555 !default;
$text-size: 12px !default;

Observera att för att tillåta SCSS att omdefiniera variabler måste de definieras med !default. Detta är en regel i SCSS. För att denna handledning ska fungera; alla variabler som du vill vara anpassningsbara måste definieras som standard i dina SCSS-filer.

Det är upp till dig när (eller om) du vill skriva över CSS-filen. Denna handledning förutsätter att när användaren klickar på "Spara" i Customizer, kommer den att kompilera om och skriva till temats CSS. Men medan Customizer-förhandsgranskningen är aktiv och användaren ändrar inställningar (innan du klickar på Spara), matar vi helt enkelt ut den kompilerade CSS-en i rubriken för förhandsgranskningen av webbplatsen. Vi vill inte skriva över CSS-filen direkt ifall användaren vill avbryta eventuella ändringar de gjort.

  Kom ihåg…

Denna handledning kommer att skriva över temats style.cssfil varje gång Customizer-inställningarna sparas.

Jag antar att du redan kompilerar dina SCSS-filer med ett kompileringsprogram (t.ex. Koala eller kommandorad). Att ha den här koden i ditt tema kommer att skriva över CSS-filen, men det kommer inte att ändra dina SCSS-källfiler. Det betyder att när du gör ändringar i Customizer och sedan går tillbaka till dina ursprungliga SCSS-filer och kompilerar om, kommer dina Customize-inställningar att gå förlorade!

Det finns flera metoder att gå runt detta och det beror på ditt projekt och hur du arbetar. I de flesta fall skulle det inte vara ett problem. Det är vanligtvis bara en sak att tänka på när du utvecklar ditt tema. Om du ger ditt färdiga tema till någon annan att använda, skulle de normalt sett inte röra dina SCSS-filer ändå.

Med det ur vägen, låt oss börja titta på hur vi går tillväga för att göra detta:

1. Bekanta dig med SCSSPHP-biblioteket och inkludera det i vårt tema
2. Skapa Customizer-inställningar för varje SCSS-variabel som vi vill ska kunna anpassas
3. Se till att Customizer förhandsgranskar ändringarna när du är på språng
4. När vi sparar Customizer-inställningarna kompilerar vi om och skriver över temats CSS-fil.

1 SCSSPHP-biblioteket

För att kompilera SCSS-filerna kommer vi att använda ett SCSSPHP-bibliotek av leafo (MIT-licens). Observera att den här handledningen är för SCSS-biblioteket. Bibliotekets författare har ett liknande LESS PHP-bibliotek om du hellre vill använda LESS, men kom ihåg att följande handledning är för SCSS-biblioteket.

SCSSPHP-biblioteket är väldigt enkelt att använda! Här är en förenklad översikt över hur vi kommer att använda biblioteket i vårt temas PHP:

• Vi inkluderar biblioteket
• Skapa en ny instans av kompilatorklassen från biblioteket
• Ladda innehållet i käll-SCSS-filen och skicka den till kompilatorobjektet
• Definiera en associativ array; SCSS-variabelnamn (inklusive $) som nycklar och deras värden. Alla element i denna array kommer att åsidosätta variabler med samma namn i den medföljande SCSS-filen.
• Vi ber kompilatorobjektet att kompilera och ta emot den kompilerade CSS som en sträng i gengäld. Vi kan sedan antingen mata ut denna CSS inuti headeller så kan vi skriva detta på temats style.cssfil

  Vilken typ av SCSS-variabler kan vi kompilera?

Det enkla svaret är: Vilken typ av giltig SCSS-variabel som helst!

SCSSPHP-biblioteket kan kompilera vilken typ av giltig SCSS-variabel som helst, men kom ihåg att du måste se till att de formateras korrekt från Customizer. Till exempel måste färger antingen ha prefixet a #för hex-färger eller formateras som rgb()eller rgba()definitioner. En storleksvariabel skulle vanligtvis behöva läggas till med ‘ px‘, ‘ em‘, ‘ %‘ och så vidare.

Om du planerar att skapa ett avancerat system för att kompilera SCSS-variabler genom Customizer-tema, se till att du har ett bra system på plats för att korrekt formatera varje typ av variabel!

Låt oss ta det första steget ur vägen; ladda ner och inkludera biblioteket i vårt tema:

Ladda ner och inkludera SCSSPHP-biblioteket i ditt tema

Det första steget är att ladda ner SCSSPHP-biblioteket. På den länkade sidan klickar du på knappen "Ladda ner" längst upp. Om du hellre vill använda Composer ger sajten en guide om detta.

Extrahera zip-filen till en undermapp någonstans i ditt tema. Som ett exempel placerar jag den i theme/inc/scssphp/mappen.

Öppna PHP-filen där du vill lägga till din kod för kompilering. Det kan vara direkt i ditt teman functions.phpeller en PHP-fil som ingår i functions.php. För enkelhetens skull skriver jag allt inuti functions.php.

Innan vi kan använda biblioteket måste vi inkludera det; såhär:

require_once(get_stylesheet_directory(). '/inc/scssphp/scss.inc.php');

Justera sökvägen till dina filer i enlighet med detta. Vi måste inkludera scss.inc.phpfilen som finns i bibliotekets rotmapp. Nu, efter denna linje kan vi använda bibliotekets klasser!

2 Skapa Customizer-inställningarna för SCSS-variablerna

Låt oss skapa WordPress Customizer-inställningarna för våra variabler. För handledningens skull kommer vi att lägga till inställningar för SCSS-variablerna som nämns ovan: två färgplockare och en nummerinmatning.

Jag kommer inte att gå in på detaljer och förklara hur man lägger till Customizer-inställningar – det finns gott om handledningar för detta. I kodexemplet nedan skapar jag ett nytt avsnitt och lägger in de tre inställningarna:

Denna kod hakar på customize_registeroch lägger till ett avsnitt som heter "Temavariabler". Den fortsätter sedan med att lägga till en färgväljare ‘ theme-main‘, ytterligare en färgväljare ‘ theme-secondary‘ och en sifferinmatning ‘ theme-text-size‘. Detta är all standard WordPress-funktionalitet. Jag lägger också till set varje inställnings standard till samma värden som definierats i variables.scssfilen. Detta är bara för att säkerställa att Customizer-inställningarna initieras med rätt färger.

Det ser jättebra ut! Men just nu händer ingenting när du justerar dessa variabler. Låt oss fortsätta med steg 3; hantera förhandsgranskning i Customizer.

3 Kompilera CSS när du är på språng i förhandsvisning av Customizer

Det här steget hanterar uppdatering av Customizer-förhandsvisningen medan användaren ändrar inställningar och kommer inte att skriva till någon av våra filer. Istället kommer vi att mata ut den kompilerade CSS i <head>förhandsgranskningen inuti en <style>tagg. På så sätt säkerställer vi att inline CSS åsidosätter all styling från den ursprungliga CSS-filen.

För att kontrollera om vi för närvarande använder Customizer-förhandsvisning eller inte, använder vi funktionen [is_customize_preview](https://developer.wordpress.org/reference/functions/is_customize_preview/)(). När detta kommer tillbaka trueskapar vi en funktion kopplad till wp_head. Inuti funktionen initierar vi och ställer in SCSSPHP-biblioteket, hämtar de aktuella inställningsvärdena, kompilerar CSS och matar ut den i en <style>tagg.

Vid raden #7definierar vi sökvägen till käll-SCSS-filen och laddar dess innehåll till en variabel på #8. Och på line #9och #10vi satte upp importsökvägen för biblioteket för att säkerställa att alla @imports fungerar korrekt i våra SCSS-filer. Du kan läsa mer om detta på bibliotekets dokumentationssajt, under rubriken "Importvägar". I grund och botten behöver SCSSPHP-biblioteket känna till den relativa sökvägen till din SCSS-mapp så att alla @importsökvägar är korrekta.

Vid raden #12-16skapar vi arrayen för kompilatorn; en associativ array med variabelnamnen som nycklar. För de värden vi använder [get_theme_mod](https://developer.wordpress.org/reference/functions/get_theme_mod/)()för att hämta värdena från Customizer. Funktionen get_theme_mod()låter dig definiera en standard som andra parameter om värdet inte har sparats. Detta räddar oss från att krascha kompilatorn med värden som null. Så vi tillhandahåller samma standard som i vår SCSS-variabelfil och när vi registrerade Customizer-inställningarna.

Observera också att koden på raden #15lägger till ett ‘ px‘, vilket säkerställer att det faktiska variabelvärdet är giltigt. Annars skulle det kompileras som " $text-size: 12;" när vi behöver " $text-size: 12px;". Vi tillhandahåller variabelmatrisen till kompilatorn på rad #17, och säger att den ska kompilera med dessa variabler.

Sedan #19-22anropar vi på raden compile()funktionen som ska returnera den kompilerade CSS som en sträng. Vi matar ut en <style>tagg med CSS-strängen inuti. Eftersom vi är anslutna till wp_head, kommer Customizer att återge förhandsgranskningen med den ändrade CSS varje gång en ändring görs.

4 Spara den kompilerade CSS-en på temats stilmall

Koden för att kompilera CSS är mycket lik det föregående steget. Den enda skillnaden är att vi nu skriver CSS till en fil istället för att mata ut den. Du borde verkligen överväga att lägga in detta i en funktion så att du inte upprepar kod, men för tydlighetens skull har jag valt att separera de två.

Vi hakar på [customize_save_after](https://developer.wordpress.org/reference/hooks/customize_save_after/)vilka som utlöser när någon klickar på Spara i WordPress Customizer. Vid det här laget hämtar vi käll-SCSS, definierar variabelvärden och kompilerar den till CSS. Med CSS-strängen använder vi en enkel PHP-funktion för att skriva den till temats CSS-fil.

Den enda skillnaden från tidigare är på raden #8där vi definierar målfilen att skriva till, och raden #19där vi skriver till filen.

  Slutsats

Vi har nu Customizer-inställningar som styr variabler i temats SCSS-fil och skriver över temats huvudformatmall med hjälp av dessa variabler. Det finns ingen gräns för hur många eller vilken typ av inställningar du vill låta temaanvändarna anpassa! Investera lite tid på att sätta upp ett ordentligt system för att hantera formateringen av olika variabeltyper (t.ex. prefix eller postfixar) och strukturera Customizer-inställningarna ordentligt. Temaanvändarna kommer att uppskatta flexibiliteten och hur lätt det är att anpassa ditt tema!

Du kan också komma på olika sätt att hantera filskrivningen av den slutliga CSS. Om du inte vill skriva över huvudformatmallen kanske du vill mata ut den till en annan fil. Du kan också titta på att använda if-else-villkor i SCSS.

Denna handledning skrevs för att ge dig en språngbräda till hur du kan anpassa ditt WordPress-tema från Customizer. Låt mig veta om det var någon användning för dig – eller om du vill ha en mer avancerad handledning som säkerställer att temats stilmall inte skrivs över!