Introduktion till Sass för nya WordPress-temadesigners

Introduktion till Sass för nya WordPress-temadesigners

Som 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. Du kommer ocksÄ att lÀra dig att mÄnga designers och front-end-utvecklare rekommenderar att du anvÀnder ett CSS-förprocessorsprÄk som Sass eller LESS. Men vad Àr dessa saker? och hur kommer du igÄng med dem? Den hÀr artikeln Àr en introduktion till Sass för nya WordPress-temadesigners. Vi berÀttar vad en CSS-förprocessor Àr, varför du behöver den och hur du installerar och börjar anvÀnda dem direkt.

Vad Àr Sass?

CSS som vi anvÀnder har utformats för att vara ett lÀttanvÀnt formatmallssprÄk. Webben har emellertid utvecklats, och sÄ Àr designernas behov ocksÄ att ha ett stilark-sprÄk som gör att de kan göra mer med mindre anstrÀngning och tid. CSS preprocessorsprÄk, som Sass, lÄter dig anvÀnda funktioner som för nÀrvarande inte Àr tillgÀngliga i CSS, som att anvÀnda variabler, grundlÀggande matematiska operatorer, kapsling, mixins, etc.

Det liknar vÀldigt mycket PHP som Àr ett förprocessorsprÄk som kör ett skript pÄ servern och genererar en HTML-utdata. 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 överfördes WordPress-adminomrÄdestilar 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 utvecklingsprocessen.

Komma igÄng med Sass för WordPress-temautveckling

De flesta temadesigners 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 förprocessorsprÄ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 fina GUI-appar 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 den hĂ€r artikelns skull mĂ„ste du skapa ett tomt tema. Skapa helt enkelt en ny mapp i / wp-content / themes /. Du kan namnge det “myteme” eller nĂ„got annat du vill ha. Inne i din tomma temamapp skapar du en annan mapp och ger den namnet pĂ„ stilark.

I stilarkmappen mÄste du skapa en style.scss-fil med en textredigerare som Anteckningar.

Nu mÄste du öppna Koala och klicka pÄ plusikonen för att lÀgga till ett nytt projekt. Leta reda pÄ din temakatalog och lÀgg till den som ditt projekt. Du kommer att mÀrka att Koala automatiskt hittar Sass-filen i din stilarkatalog och visar den.

LĂ€gger till projekt i Koala

Högerklicka pÄ din Sass-fil och vÀlj alternativ. VÀlj nu roten till din temakatalog, exempel / wp-content / themes / mytheme / och tryck enter. Koala kommer nu att generera CSS-utdatafil i din temakatalog. För att testa detta mÄste du öppna din Sass-filstil.scss i en textredigerare som Anteckningar 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 och sidofÀltet glider till höger. För att kompilera din Sass-fil klickar du bara pÄ knappen. Du kan se resultaten 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; }

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

Vilka andra supermakter Sass överför till CSS?

Sass Àr otroligt kraftfull, bakÄtkompatibel och super lÀtt att lÀra sig. Som vi nÀmnde tidigare att du kan skapa variabler, hÀckning, mixins, import, partialer, matematiska och logiska operatorer etc. Nu visar vi dig nÄgra exempel och du kan prova dem pÄ ditt WordPress-tema.

Hantera flera formatmallar

Ett vanligt problem som du kommer att möta som WordPress-temadesigner Àr stora formatmallar med mÄnga sektioner. Du kommer antagligen att rulla upp och ner mycket för att fixa saker medan du arbetar med ditt tema. Med hjÀlp av Sass kan du importera flera filer till ditt huvudformat och mata 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 ytterligare en HTTP-begĂ€ran till servern. Detta pĂ„verkar din sidladdningstid som 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 att anvÀnda @import i Sass mÄste du först skapa en reset.scss-fil i temat stilkatalog 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 huvud style.scss-fil och lÀgga till den hÀr raden dÀr du vill att ÄterstÀllningsfilen ska importeras:


@import 'reset';

Observera att du inte behöver ange hela filnamnet. För att kompilera detta mĂ„ste du öppna Koala och klicka pĂ„ kompileringsknappen igen. Öppna nu ditt temas huvudsakliga style.css-fil sĂ„ visas din Ă„terstĂ€llnings-css inkluderad i den.

Nestin i Sass

Till skillnad frÄn HTML Àr CSS inte ett kapslat sprÄk. Med Sass kan du skapa kapslade filer som Àr lÀtta att hantera och arbeta med. Du kan till exempel bygga in alla element för avsnittet under artikelvÀljaren. Som WordPress-temadesigner lÄter du dig arbeta pÄ olika sektioner och utforma varje element enkelt. För att se nestin i aktion, 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 skickas 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 utforma olika utseende och kÀnslor för widgets, inlÀgg, navigeringsmenyer, rubriker 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 skulle du behöva ÄteranvÀnda lite 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 Àr 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;
}

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


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

Observera att du mÄste anvÀnda @include för att lÀgga till ett mixin. Efter bearbetning genereras följande CSS:


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

Mixins Àr ocksÄ mycket hjÀlpsamma med leverantörsprefix. NÀr du lÀgger till opacitetsvÀrden eller grÀnsradie kan du spara mycket tid genom att anvÀnda mixins. Titta pÄ detta exempel, 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 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; }

Vi hoppas att den hÀr artikeln vÀckte ditt intresse för Sass för WordPress-temautveckling. MÄnga WordPress-temadesigners anvÀnder det redan. Vissa gÄr sÄ lÄngt som att sÀga att i framtiden kommer alla CSS att förbehandlas, och WordPress-teman utvecklare behöver upp sitt spel. LÄt oss veta vad du tycker om att anvÀnda ett CSS preprocessorsprÄk som Sass för din WordPress-temautveckling genom att lÀmna en kommentar nedan.

Ytterligare resurser

Sass Lang
Sass Way