Introduksjon til Sass for New WordPress Theme Designers

Som en ny WordPress-tema designer, vil du raskt lære utfordringene med å opprettholde lange CSS-filer samtidig som de holder dem organisert, skalerbar og lesbar. Du vil også lære at mange designere og front-end-utviklere anbefaler å bruke et CSS preprocessorspråk som Sass eller LESS. Men hva er disse tingene? og hvordan kommer du i gang med dem? Denne artikkelen er en introduksjon til Sass for nye WordPress Theme Designers. Vi vil fortelle deg hva en CSS preprocessor er, hvorfor du trenger det, og hvordan du installerer og begynner å bruke dem med en gang.

Hva er Sass?

CSS som vi bruker, var designet for å være et brukervennlig stilarksprog. Imidlertid har nettverket utviklet seg, og det er også behov for designere å ha et stilark som gjør at de kan gjøre mer med mindre innsats og tid. CSS preprocessor-språk, som Sass, lar deg bruke funksjoner som ikke er tilgjengelige i CSS, for eksempel bruk av variabler, grunnleggende matteoperatører, nesting, mixins, etc.

Det er veldig mye som PHP, som er et preprosessorspråk som kjører et skript på serveren og genererer en HTML-utgang. På samme måte forbereder Sass .scss filer for å generere CSS-filer som kan brukes av nettlesere.

Siden versjon 3.8 ble WordPress-administrasjonsstiler utformet for å utnytte Sass for utvikling. Det er mange WordPress-temabutikker og -utviklere som allerede bruker Sass for å få fart på utviklingsprosessen.

Komme i gang med Sass for WordPress Theme Development

De fleste tema designere bruker lokalt utviklingsmiljø for å jobbe med sine temaer før de distribueres til et scenemiljø eller en live server. Siden Sass er et preprosessorspråk, må du installere det på ditt lokale utviklingsmiljø.

Første du må gjøre er å installere Sass. Den kan brukes som et kommandolinjeverktøy, men det finnes også noen fine GUI-apper tilgjengelig for Sass. Vi anbefaler at du bruker Koala, som er en gratis opensource-app tilgjengelig for Mac, Windows og Linux.

For denne artiklens skyld må du opprette et tomt tema. Opprett bare en ny mappe i / Wp-content / themes /. Du kan nevne det 'mytheme' eller noe annet du vil ha. Inne i den tomme temapappen oppretter du en annen mappe og heter det stilark.

I stilarkarkmappen må du opprette en style.scss fil ved hjelp av en tekstredigerer som Notisblokk.

Nå må du åpne Koala og klikke på plussikonet for å legge til et nytt prosjekt. Deretter finner du temakatalogen og legger den til som prosjekt. Du vil legge merke til at Koala automatisk vil finne Sass-filen i din stilark og vise den.

Høyreklikk på Sass-filen din og velg Angi utgangssti alternativ. Velg nå roten til temakataloget ditt, eksempel, / Wp-content / themes / Mytheme / og trykk enter. Koala vil nå generere CSS-utdatafil i temakatalogen. For å teste dette må du åpne din Sass-fil style.scss i en tekstredigerer som Notisblokk og legg til denne koden:

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

Nå må du lagre endringene dine og gå tilbake til Koala. Høyreklikk på Sass-filen, og sidebjelken vil skyve til høyre. For å kompilere Sass-filen klikker du bare på 'Kompilere' knapp. Du kan se resultatene ved å åpne style.css filen i temakatalogen din, og den vil ha den behandlede CSS slik:

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

Legg merke til at vi har definert en variabel $ fonter i vår Sass-fil. Nå når vi trenger å legge til skrifttype, trenger vi ikke å skrive navnene på alle skriftene igjen. Vi kan bare bruke $ fonter.

Hvilke andre supermakt Sass bringer til CSS?

Sass er utrolig kraftig, bakoverkompatibel og super lett å lære. Som vi tidligere nevnte, kan du opprette variabler, nesting, mixins, import, partials, matematiske og logiske operatører, etc. Nå vil vi vise deg noen eksempler, og du kan prøve dem ut på WordPress-temaet ditt.

Administrere flere stilark

Et vanlig problem som du vil møte som en WordPress-tema designer er store stilark med mange seksjoner. Du vil sannsynligvis rulle opp og ned mye for å fikse ting mens du arbeider med temaet ditt. Ved hjelp av Sass kan du importere flere filer til hovedformatarket ditt og sende ut en enkelt CSS-fil for temaet ditt.

Hva med CSS @ import?

Problemet med å bruke @import i CSS-filen din er at hver gang du legger til en @import, gjør CSS-filen din en annen HTTP-forespørsel til serveren. Dette påvirker siden din lastetid som ikke er bra for prosjektet ditt. På den annen side, når du bruker @import i Sass, vil den inkludere filene i din Sass-fil og vise dem alle i en enkelt CSS-fil for nettleserne.

For å lære å bruke @import i Sass, må du først opprette en reset.scss filen i temaet ditt stilarklister og lim inn denne koden i den.

 / * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Lisens: ingen (offentlig domene) * / html, kropp, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, stor kiter koden del dfn em img kbd q s samp liten streik sterk sub sup sup tt var du du midt i dl dt, dd, ol, ul, li, feltet, form, etikett, legenden, tabell, bildetekst, tbody, tfoot, thead, tr, th, td, artikkel, til side, lerret, detaljer, embed, figur, figcaption, footer, header, hgroup, meny, nav, utdata, rubin, seksjon, sammendrag, tid, markere, lyd, video margin: 0; polstring: 0; grense: 0; skriftstørrelse: 100%; skrifttype: arve; vertikaljustering: basislinje;  / * HTML5 display-rolle reset for eldre nettlesere * / artikkel, til side, detaljer, figcaption, figur, footer, header, hgroup, meny, nav, del display: block;  kropp linjehøyde: 1;  ol, ul listestil: ingen;  blockquote, q quotes: none;  blockquote: før, blockquote: etter, q: før, q: etter innhold: "; innhold: none; table border collapse: collapse; border spacing: 0; 

Nå må du åpne din main style.scss-fil og legge til denne linjen der du vil at nullstillingsfilen skal importeres:

 @import 'reset'; 

Legg merke til at du ikke trenger å skrive inn hele filnavnet. For å kompilere dette må du åpne Koala og klikke på kompileringsknappen igjen. Åpne nå temaet ditt main style.css-fil, og du vil se din tilbakestille css inkludert i den.

Nestin i Sass

I motsetning til HTML er CSS ikke et nestet språk. Sass lar deg lage nestede filer som er enkle å administrere og jobbe med. For eksempel kan du nest alle elementene for delen, under artikkelvelgeren. Som en WordPress-temadesigner kan du jobbe på forskjellige seksjoner og enkelt utforme hvert element. For å se nestin i aksjon, legg dette til din style.scss fil:

 .oppføringsinnhold p font-size: 12px; linje-høyde: 150%;  ul linjehøyde: 150%;  a: link, a: besøkt, a: aktiv tekst-dekorasjon: ingen; farge: # ff6633;  

Etter behandling vil den sende ut følgende CSS:

 .oppføringsinnhold p font-size: 12px; linjehøyde: 150%;  .entry-innhold ul linjehøyde: 150%;  .entry-content a: link, .entry-content a: besøkt, .entry-innhold a: aktiv text-decoration: none; farge: # ff6633;  

Som tema designer vil du utforme forskjellig utseende og følelser for widgets, innlegg, navigasjonsmenyer, topptekst osv. Bruke nestin i Sass gjør det godt strukturert, og du trenger ikke å skrive de samme klassene, selektorer og identifikatorer over og over igjen.

Bruke Mixins i Sass

Noen ganger trenger du å gjenbruke noen CSS gjennom hele prosjektet ditt, selv om stilreglene vil være de samme fordi du vil bruke dem på forskjellige selektorer og klasser. Dette er hvor mixins kommer til nytte. Lar legge til en mixin til din style.scss-fil:

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

Denne blandingen gjemmer i utgangspunktet litt tekst fra å bli vist. Her er et eksempel på hvordan du kan bruke denne mixen til å skjule tekst for logoen din:

 .logo bakgrunn: url ("logo.png"); høyde: 100 piksler; bredde: 200px; @include hide-text;  

Legg merke til at du må bruke @inkludere å legge til en mixin. Etter behandling vil det generere følgende CSS:

 .logo bakgrunn: url ("logo.png"); høyde: 100px; bredde: 200px; overløp: skjult; tekstindeks: -9000px; skjerm: blokk;  

Mixins er også veldig hjelpsomme med leverandør prefiks. Når du legger til uklarhetsverdier eller grensestrek, bruker du mixins, kan du spare mye tid. Se på dette eksempelet, hvor vi har lagt til en mixin for å legge til radiusradius.

 @mixin border-radius ($ radius) -webkit-border-radius: $ radius; -moz-grense-radius: $ radius; -ms-grense-radius: $ radius; -grense-radius: $ radius; border-radius: $ radius;  .largebutton @include border-radius (10px);  .smallbutton @include border-radius (5px);  

Etter samlingen genererer den følgende CSS:

 .largebutton -webkit-border-radius: 10px; -moz-grense-radius: 10px; -ms-radius: 10px; -grense-radius: 10px; border-radius: 10px; . knappknapp -webkit-grense-radius: 5px; -moz-grense-radius: 5px; -ms-grense-radius: 5px; -grense-radius: 5px; border-radius: 5px;  

Vi håper at denne artikkelen piqued din interesse for Sass for WordPress tema utvikling. Mange WordPress tema designere bruker allerede den. Noen går så langt som å si at i fremtiden vil alle CSS bli forhåndsbehandlet, og WordPress-temautviklere trenger opp sitt spill. Gi oss beskjed om hva du synes om å bruke et CSS preprosessorspråk som Sass for WordPress-temautvikling ved å legge igjen en kommentar nedenfor.

Tilleggsressurser

Sass Lang
The Sass Way