Introduktion till Sass för nya WordPress-temadesigners

Som en ny WordPress-temadesigner lär du dig snabbt utmaningarna med att underhålla långa CSS-filer samtidigt som du håller dem organiserade, skalbara och läsbara.

Många designers och front-end-utvecklare, inklusive de här på WPBeginner, rekommenderar att använda ett CSS-preprocessor-språk som Sass eller LESS för att göra jobbet enklare. Men vad är dessa preprocessors? Och hur kommer man igång med dem?

Den här artikeln är en introduktion till Sass för nya WordPress-temadesigners. Vi kommer att berätta vad en CSS-preprocessor är, varför du behöver den och hur du installerar och börjar använda dem direkt.

Vad är Sass (Syntactically Awesome Stylesheet)?

Den CSS som vi använder designades för att vara ett lättanvänt stylesheet-språk. Webben har dock utvecklats, och därmed behöver designers ett stylesheet-språk som låter dem göra mer med mindre ansträngning och tid.

CSS-preprocessor-språk, som Sass, tillåter dig att använda funktioner som inte är tillgängliga i CSS för närvarande, såsom variabler, grundläggande matematiska operatorer, nästling, mixins, etc.

Det är väldigt likt PHP, som är ett preprocessspråk som exekverar ett skript på servern och genererar en HTML-utdata. På liknande sätt förbehandlar Sass .scss-filer för att generera CSS-filer som kan användas av webbläsare.

Sedan version 3.8 har WordPress administrationsområdesstilar porterats för att använda Sass för utveckling. Det finns många WordPress-temabutiker och utvecklare som redan använder Sass för att snabba upp sin utvecklingsprocess.

Kom igång med Sass för WordPress-temautveckling

De flesta temadesigners använder en lokal utvecklingsmiljö för att arbeta med sina teman innan de driftsätter det till en staging-miljö eller en live-server. Eftersom Sass är ett preprocessor-språk måste du installera det i 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 bra GUI-appar tillgängliga för Sass. Vi rekommenderar att använda Koala, som är en gratis open source-app tillgänglig för Mac, Windows och Linux.

För den här artikeln behöver du skapa ett tomt tema. Skapa helt enkelt en ny mapp i /wp-content/themes/. Du kan namnge den 'mytheme' eller vad du vill. Inuti din tomma temamapp skapar du en annan mapp och namnger den stylesheets.

I mappen stylesheets måste du skapa en fil som heter style.scss med en textredigerare som Anteckningar.

Nu behöver du öppna Koala och klicka på plusikonen för att lägga till ett nytt projekt. Lokalisera sedan din temakatalog och lägg 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 alternativet Ange utdataväg. Välj nu roten av din temakatalog, till exempel /wp-content/themes/mytheme/ och tryck enter. Koala kommer nu att generera en CSS-utdatafil i din temakatalog.

För att testa detta behöver du öppna din Sass-fil style.scss i en textredigerare som Anteckningar och lägga till denna kod:

$fonts: arial, verdana, sans-serif; 
body { 
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 in på höger sida. För att kompilera din Sass-fil klickar du helt enkelt på knappen 'Kompilera'.

Du kan se resultaten genom att öppna filen style.css i din temakatalog, och den kommer att ha den bearbetade CSS:en så här:

body {
  font-family: arial, verdana, sans-serif; }

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

Vilka andra superkrafter ger Sass till CSS?

Sass är otroligt kraftfullt, bakåtkompatibelt och superenkelt att lära sig. Som vi nämnde tidigare kan du skapa variabler, nesting, mixins, import, partials, matematiska och logiska operatorer, etc.

Nu visar vi dig några exempel, och du kan prova dem på ditt WordPress-tema.

Hantera flera stylesheets

Ett vanligt problem som du kommer att stöta på som WordPress-temadesigner är stora stilmallar med många sektioner. Du kommer förmodligen att scrolla 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 stylesheet och skapa 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 ytterligare en HTTP-begäran till servern. Detta påverkar din sidas laddningstid, 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 leverera 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 fil reset.scss i din temas stylesheet-katalog och klistra in den här koden i den.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    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 reset-filen ska importeras:

@import 'reset';

Lägg märke till att du inte behöver ange hela filnamnet. För att kompilera detta behöver du öppna Koala och klicka på kompilera-knappen igen. Öppna nu din temas huvudsakliga style.css-fil, och du kommer att se din reset CSS inkluderad i den.

Nestin i Sass

Till skillnad från HTML är CSS inte ett nästlat språk. Sass låter dig skapa nästlade filer som är lätta att hantera och arbeta med. Du kan till exempel nästla alla element för <article>-sektionen under artikelväljaren.

Som WordPress-temadesigner gör detta att du kan arbeta med olika sektioner och enkelt styla varje element. För att se nästning i praktiken, lägg till detta i din style.scss-fil:

.entry-content { 
p { 
font-size:12px;
line-height:150%;  
} 
ul { 
line-height:150%; 
}
a:link, a:visited, a:active { 
text-decoration:none;
color: #ff6633;
} 
} 

Efter bearbetning kommer den att generera följande CSS:

.entry-content p {
  font-size: 12px;
  line-height: 150%; }
.entry-content ul {
  line-height: 150%; }
.entry-content a:link, .entry-content a:visited, .entry-content a:active {
  text-decoration: none;
  color: #ff6633; }

Som temadesigner kommer du att designa ett annorlunda utseende och känsla för widgets, inlägg, navigeringsmenyer, header, etc. Att använda nestin i Sass gör det välorganiserat, och du behöver inte skriva samma klasser, selektorer och identifierare om och om igen.

Använda Mixins i Sass

Ibland behöver du återanvända viss CSS i hela ditt projekt, även om stilreglerna kommer att vara desamma eftersom du kommer att använda dem på olika selektorer och klasser. Det är här mixins kommer till nytta. Låt oss lägga till en mixin i din style.scss-fil:

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

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

.logo{
    background: url("logo.png");
    height:100px;
    width:200px;
    @include hide-text;
}

Lägg märke till att du behöver använda @include för att lägga till en mixin. Efter bearbetning kommer det att generera följande CSS:

.logo {
  background: url("logo.png");
  height: 100px;
  width: 200px;
  overflow: hidden;
  text-indent: -9000px;
  display: block; }

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

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

Efter kompilering kommer den att generera följande CSS:

.largebutton {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px; }
 
.smallbutton {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px; }

Ytterligare resurser

Sass Lang
The Sass Way

Vi hoppas att den här artikeln hjälpte dig att lära dig om Sass för WordPress-temautveckling. Många WordPress-temadesigners använder det redan. Vissa går så långt som att säga att all CSS i framtiden kommer att förbearbetas, och WordPress-temautvecklare behöver höja sig. Du kanske också vill se vår guide om WordPress body class-tips för temadesigners, eller våra experters val av de bästa drag-and-drop WordPress-sidbyggarna.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.