Introduktion till Sass för nya WordPress Theme Designers

Som en ny WordPress-temdesigner skulle du snabbt lära dig utmaningarna att behålla långa CSS-filer samtidigt som de hålls organiserade, skalbara och läsbara. Du lär dig också att många designers och front-end-utvecklare rekommenderar att du använder ett CSS preprocessorspråk som Sass eller LESS. Men vad är det här? och hur börjar du med dem? Den här artikeln är en introduktion till Sass för nya WordPress Theme Designers. Vi kommer att berätta vad en CSS preprocessor är, varför behöver du den, och hur man installerar och börjar använda dem genast.

Vad är Sass?

Den CSS som vi använder är utformad för att vara ett enkelt att använda stilarkspråk. Men webben har utvecklats, och det är också behovet av designers att ha ett stylesheet-språk som gör det möjligt för dem att göra mer med mindre ansträngning och tid. CSS preprocessor språk, som Sass, låter dig använda funktioner som för närvarande inte är tillgängliga i CSS, till exempel genom att använda variabler, grundläggande matteoperatörer, nesting, mixins, etc.

Det är väldigt mycket som PHP, vilket är ett preprocessorspråk som kör ett skript på servern och genererar en HTML-utgång. På samma sätt förbereder Sass .scss filer för att generera CSS-filer som kan användas av webbläsare.

Sedan version 3.8 har WordPress-administratörsområdesformat portat för att utnyttja Sass för utveckling. Det finns många WordPress-temabutiker och utvecklare som redan använder Sass för att påskynda sin utvecklingsprocess.

Komma igång med Sass för WordPress Theme Development

De flesta tematekniker använder lokal utvecklingsmiljö för att arbeta med sina teman innan de distribueras till en scenmiljö eller en live-server. Eftersom Sass är ett preprocessorspråk måste du installera det på din lokala utvecklingsmiljö.

Det första du behöver göra är att installera Sass. Det kan användas som ett kommandoradsverktyg, men det finns också några trevliga GUI Apps tillgängliga för Sass. Vi rekommenderar att du använder Koala, som är en gratis opensource-app tillgänglig för Mac, Windows och Linux.

För denna artikels skull behöver du skapa ett tomt tema. Skapa bara en ny mapp i / Wp-innehåll / teman /. Du kan namnge det 'mytheme' eller något annat du vill ha. Inne i din tomma tematmapp skapa en annan mapp och namnge det stylesheets.

I mappen Styleheets måste du skapa en style.scss fil med hjälp av en textredigerare som anteckningsblock.

Nu behöver du öppna Koala och klicka på plusikonen för att lägga till ett nytt projekt. Därefter letar du efter din temakatalog och lägger till den som ditt projekt. Du kommer att märka att Koala automatiskt hittar Sass-filen i din stylesheets-katalog och visar den.

Högerklicka på din Sass-fil och välj Ange utgångsbanan alternativ. Välj nu roten till din temakatalog, exempel, / Wp-content / themes / Mytheme / och tryck på Enter. Koala kommer nu att generera CSS-utdatafil i din temakatalog. För att testa detta måste du öppna din Sass-fil style.scss i en textredigerare som anteckningsblock och lägg till den här koden:

 $ teckensnitt: arial, verdana, sans-serif; kropp font-family: $ fonts;  

Nu behöver du spara dina ändringar och gå tillbaka till Koala. Högerklicka på din Sass-fil och sidofältet glider åt höger. För att kompilera din Sass-fil klickar du bara på 'Sammanställa' knapp. Du kan se resultaten genom att öppna style.css filen i din temakatalog, och den kommer att ha den bearbetade CSS så här:

 kropp font-family: arial, verdana, sans-serif;  

Observera att vi har definierat en variabel $ typsnitt i vår Sass-fil. Nu när vi behöver lägga till en typfamilj behöver vi inte skriva namnen på alla teckensnitt igen. Vi kan bara använda $ typsnitt.

Vilka andra stormakter Sass tar med till CSS?

Sass är otroligt kraftfull, bakåtkompatibel och super lätt att lära. Som vi nämnde tidigare kan du skapa variabler, nesting, mixins, import, partials, matematiska och logiska operatörer etc. Nu kommer vi att visa några exempel, och du kan prova dem på ditt WordPress-tema.

Hantera flera stilark

Ett vanligt problem som du kommer att möta som en WordPress-temdesigner är stora stylesheets med många avsnitt. Du kommer noga att rulla upp och ner mycket för att fixa saker medan du arbetar med ditt tema. Med Sass kan du importera flera filer till ditt huvudsakliga stilark och utföra en enda CSS-fil för ditt tema.

Vad sägs om CSS @ import?

Problemet med att använda @import i din CSS-fil är att varje gång du lägger till en @import, gör din CSS-fil en annan HTTP-begäran till servern. Detta påverkar din sidlastningstid vilket inte är bra för ditt projekt. Å andra sidan, när du använder @import i Sass, kommer det att inkludera filerna i din Sass-fil och tjäna dem alla i en enda CSS-fil för webbläsarna.

För att lära dig hur du använder @import i Sass måste du först skapa en reset.scss filen i ditt temas stilark och lägg in den här koden i den.

 / * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licens: ingen (offentlig domän) * / html, kropp, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, före, a, abbr, akronym, stor citat kod del dfn em img kbd q s samp liten strejk stark sub sub sup tt var var du mitt centrum dl dt, dd, ol, ul, li, fältet, form, etikett, legend, tabell, bildtext, tbody, tfoot, thead, tr, th, td, artikel, åt sidan, kanfas, detaljer, bädda in, figur, figcaption, footer, hgroup, meny, nav, utgång, rubin, avsnitt, sammanfattning, tid, markera, ljud, video margin: 0; vaddering: 0; gräns: 0; typsnittstorlek: 100%; typsnitt: ärv; vertikaljustering: baslinje;  / * HTML5 display-rollåterställning för äldre webbläsare * / artikel, åtgärd, detaljer, figcaption, figur, footer, header, hgroup, meny, nav, avsnitt display: block;  kropp linjehöjd: 1;  ol, ul listestil: none;  blockquote, q quotes: none;  blockquote: före, blockquote: after, q: before, q: efter content: "; content: none; table border collapse: collapse; border spacing: 0; 

Nu måste du öppna din huvudsakliga style.scss-fil och lägga till den här raden där du vill att återställningsfilen ska importeras:

 @import 'återställ'; 

Observera att du inte behöver ange hela filnamnet. För att kompilera detta måste du öppna Koala och klicka på kompilera knappen igen. Öppna nu ditt temas huvudsakliga style.css-fil, och du kommer se din återställning css som ingår i den.

Nestin i Sass

Till skillnad från HTML är CSS inte ett kapslade språk. Sass låter dig skapa inbyggda filer som är lätta att hantera och arbeta med. Till exempel kan du boa alla element för avsnittet, under artikelväljaren. Som en WordPress-temdesigner låter du dig arbeta på olika avsnitt och utforma varje element enkelt. För att se nestin i åtgärd, lägg till det här i din style.scss fil:

 .inmatningsinnehåll p font-size: 12px; line-height: 150%;  ul linjehöjd: 150%;  a: länk, a: besökte, a: aktiv text-decoration: none; färg: # ff6633;  

Efter bearbetning kommer den att mata ut följande CSS:

 .inmatningsinnehåll p fontstorlek: 12px; linjehöjd: 150%;  .tryck-innehåll ul linjehöjd: 150%;  .entry-content a: länk, .entry-innehåll a: besökte, .entry-innehåll a: aktiv text-decoration: none; färg: # ff6633;  

Som temadesigner kommer du att utforma olika utseende och känslor för widgets, inlägg, navigeringsmenyer, rubrik etc. Användning av nestin i Sass gör det väl strukturerat, och du behöver inte skriva samma klasser, väljare och identifierare över och om igen.

Använda Mixins i Sass

Ibland behöver du återanvända vissa CSS genom hela ditt projekt trots att stilreglerna kommer att vara desamma eftersom du kommer att använda dem på olika valörer och klasser. Det här är mixins som är till nytta. Låt lägga till en mixin till din style.scss-fil:

 @mixin hide-text overflow: hidden; text-indent: -9000px; display: block;  

Denna mixin döljer i grunden viss text från att visas. Här är ett exempel på hur du kan använda denna mixin för att dölja text för din logotyp:

 .logotyp bakgrund: url ("logo.png"); höjd: 100px; bredd: 200px; @ include hide-text;  

Observera att du måste använda @inkludera att lägga till en mixin Efter bearbetning genereras följande CSS:

 .logotyp bakgrund: url ("logo.png"); höjd: 100px; bredd: 200px; överflöde: gömd; textindelning: -9000px; display: block;  

Mixins är också mycket användbara med leverantörs prefix. När du lägger opacitetsvärden eller gränsradie med hjälp av mixins kan du spara mycket tid. Titta på det här exemplet, där vi har lagt till en mixin för att lägga till radie.

 @mixin gränserad radien ($ radie) -webkit-border-radius: $ radius; -moz-gränsen-radie: $ radie; -ms-gränsen-radien: $ radie; -gräns-radien: $ radie; gränsradien: $ radie;  .largebutton @ include border-radius (10px); . smalknapp @include border-radius (5px);  

Efter sammanställning kommer det att generera följande CSS:

 .largebutton -webkit-border-radius: 10px; -moz-gränsen-radien: 10px; -ms-gränsen-radien: 10px; -gränsradio: 10px; gränsstråle: 10px; . knappknapp -webkit-border-radius: 5px; -moz-gränsen-radie: 5px; -ms-gränsen-radie: 5px; -gränsradio: 5px; gränsstråle: 5px;  

Vi hoppas att denna artikel piqued ditt intresse för Sass för WordPress temat utveckling. Många WordPress-temadesigners använder redan den. Vissa går så långt som att säga att i framtiden kommer alla CSS att vara förbehandlade, och WordPress-temaprojektorer behöver upp sitt spel. Låt oss veta vad du tycker om att använda ett CSS preprocessor språk som Sass för din WordPress temat utveckling genom att lämna en kommentar nedan.

Ytterligare resurser

Sass Lang
The Sass Way