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 front-end utvecklare rekommenderar att man använder ett CSS preprocessorspråk som Sass eller LESS för att göra jobbet enklare. Men vad är det här för något? Och hur kommer du 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)?

CSS som vi använder utformades för att vara ett användarvänligt språk för stylesheets. Webben har dock evolverat och därför behöver designers ett språk för stylesheets som allowar dem att göra mer med mindre ansträngning och tid. CSS preprocessorspråk, som Sass, tillåter dig att använda funktioner som för närvarande inte är tillgängliga i CSS, såsom 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 WordPress admin area styles portats 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 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 gillar 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 theme directory, exempel, /wp-content/themes/mytheme/ och tryck enter. Koala kommer nu att generera CSS-utdatafilen i din theme directory. För att testa detta måste du öppna din Sass-fil style.scss i en textredigerare som Notepad och add to denna kod:

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

Nu måste du save dina ändringar och gå tillbaka till Koala. Högerklicka på din Sass-fil, så glider sidebaren in till höger. 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 theme directory, och den kommer att ha den bearbetade CSS som gillar detta:

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, och du kan prova dem på din WordPress tema.

Hantering av flera stylesheets

Ett vanligt problem som du kommer att möta som designer av WordPress-teman är stora stylesheets med många sections. Du kommer förmodligen att rulla upp och ner mycket för att fixa saker medan du arbetar med ditt theme. Med Sass kan du importera flera filer till din huvudsakliga stylesheet och få ut en enda CSS-fil för ditt theme.

Vad sägs om CSS @import?

Problemet med att använda @import i din CSS-fil är att varje gång du addar en @import gör din CSS-fil en ny HTTP request 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 servera dem all 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 ej ett nästlat språk. Sass allow you to create nested files which are easy to manage and work with. Du kan till exempel kapsla in alla element för <article> section, under artikelväljaren. Som en WordPress theme designer, allow this you to work on different sections and style each elements easily. För att se nestin i action, add detta till 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.