Introduktion till Sass för nya designers av teman för WordPress

Som new designer av WordPress-teman lär du dig snabbt utmaningarna med att underhålla långa CSS-filer och samtidigt hålla dem organiserade, skalbara och läsbara.

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

Den här artikeln är en introduktion till Sass för new WordPress theme designers. Vi berättar 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 utformades för att vara ett lättanvänt formatmallspråk. Men webben har utvecklats, och därför behöver designers ha ett stilmallspråk som gör att de kan göra mer med mindre ansträngning och tid.

CSS preprocessorspråk, som Sass, gör att du kan använda funktioner som för närvarande inte är tillgängliga i CSS, till exempel variabler, grundläggande matematiska operatorer, nesting, mixins etc.

Det gillar PHP, som är ett preprocessorspråk som kör ett skript på servern och genererar en HTML-utdata. På samma 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 stilarna i WordPress adminområde överförts till att använda Sass för utveckling. Det finns många WordPress-temabutiker och utvecklare som redan använder Sass för att påskynda sin utvecklingsprocess.

Kom igång med Sass för utveckling av teman i WordPress

De flesta utvecklare av teman använder en lokal utvecklingsmiljö för att arbeta med sina themes innan de distribueras till en staging-miljö eller en live server. Eftersom Sass är ett preprocessorsprå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 trevliga GUI Apps tillgängliga för Sass. Vi rekommenderar att du använder Koala, som är en gratis opensource app som är tillgänglig för Mac, Windows och Linux.

För den här artikeln behöver du skapa ett tomt theme. Skapa helt enkelt en new folder i /wp-content/themes/. Du kan namnge den ”mytheme” eller något annat du vill. Inuti din tomma theme folder skapar du en annan folder och namnger den stylesheets.

I mappen stylesheets måste du skapa en style .scss-fil med hjälp av en textredigerare som Notepad .

Nu måste du öppna Koala och klicka på plus icon för att add a new project. Därefter lokaliserar du din theme directory och add to den som ditt projekt. You will notice that Koala will automatically find the Sass file in your stylesheets directory and display it.

Högerklicka på din Sass-fil och välj alternativet Set Output Path. Välj nu roten till din temakatalog, till exempel /wp-content/themes/mytheme/ och tryck på enter . Koala kommer nu att generera CSS-utdatafilen i din temakatalog.

För att testa detta måste du öppna din Sass-fil style.scss i en textredigerare som Notepad och lägga till den här koden :

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

Nu måste du spara dina ändringar och gå tillbaka till Koala. Högerklicka på din Sass-fil, så glider sidofältet in till höger. För att kompilera din Sass-fil klickar du helt enkelt på knappen ”Kompilera”.

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

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

Notice att vi har definierat en variabel $fonts i vår Sass-fil. Nu när vi behöver add to font familj behöver vi inte skriva in namnen på alla fonts igen. Vi kan bara använda $fonts.

Vilka andra superkrafter ger Sass till CSS?

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

Nu ska vi visa dig några exempel som du kan testa i ditt WordPress-tema.

Hantering av flera stylesheets

Ett vanligt problem som du kommer att stöta på som WordPress-temadesigner är stora stylesheets med många sektioner. Du kommer förmodligen att scrolla upp och ner en hel del för att fixa saker medan du arbetar med ditt tema.

Med Sass kan du importera flera filer till din huvudsakliga stilmall och få ut 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 ny HTTP-begäran till servern. Detta påverkar sidans 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 servera 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-fil i ditt temas stylesheets directory 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 huvudfil style.scss och add to den här raden där du vill att återställningsfilen ska importeras:

@import 'reset';

Notice att du ej behöver enter det fullständiga filnamnet. För att kompilera detta måste du öppna Koala och klicka på knappen kompilera igen. Öppna nu ditt temas huvudfil style.css, 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 nesta alla element för avsnittet <article> under artikelväljaren .

Som WordPress-temadesigner kan du på så sätt arbeta med olika sektioner och enkelt styla varje element. Om du vill se nestin i aktion kan du lägga 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 behandlingen kommer följande CSS att matas ut:

.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; }

As a theme designer, you will be designing different look and feel for widgets, posts, navigation menus, header, etc. Genom att använda nestin i Sass blir det välstrukturerat och du behöver ej skriva samma klasser, väljare och ID:n om och om igen.

Använda mixins i Sass

Ibland skulle du behöva återanvända vissa CSS genom hela ditt projekt även om stilreglerna kommer att vara desamma eftersom du kommer att använda dem på olika väljare och klasser. Det är här mixins kommer till nytta. Lets add a mixin to your style.scss file:

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

Denna mixin döljer i princip 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 logga:

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

Notice that you need to use @include to add a mixin. Efter behandling 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å till stor hjälp när det gäller leverantörsprefix. När du lägger till opacitetsvärden eller border radius kan du spara mycket tid genom att använda mixins. Titta på det här exemplet, där vi har lagt till en mixin för att add to border radius.

@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); }

Följt av kompileringen genererar den 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 mer om Sass för WordPress tema utveckling. Många WordPress temadesigners använder det redan. Vissa går så långt som att säga att i framtiden kommer all CSS att förbehandlas, och WordPress temautvecklare måste uppgradera sitt spel. Du kanske också vill se vår guide om WordPress body class tips för temadesigners eller våra expertval av de bästa drag and drop WordPress page builders.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.