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
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dapo O says
Thanks for this.
I’m building a custom Block theme and wondering if I can use SASS same way I do with Classic themes.
WPBeginner Support says
There are some differences in how CSS is added with a Block theme compared to Classic themes.
Administratör
Mark says
Great tutorial. How do you go about creating a WordPress child theme using SASS and Koala? That would be a very useful tutorial…
WPBeginner Support says
While we don’t have a guide for that at the moment, we will certainly take a look at it for a possible article.
Administratör
Paulo Jesus says
Hi, I am working on a WordPress theme using bootstrap and sass. I have a sass folder set up using the smacss aproach and on the root of my sass folder I have a style.sccs file that imports all the scss files for all the sections on my theme(_footer.scss, _header.scss, etc) then it outputs to my style.css file on the root of my theme. The issue I am having is that I am extending some bootstrap classes in some of those .scss files and if I include a _bootstrap.scss on my sass folder and import it on my style.scss file everything works fine, however the whole bootstrap is then also compiled to my style.css and it becomes quite messy. Ideally I would want the bootstrap css separated from my them styles not as part of my style.css, however if I dont import it on my style.scss and instead enqueue it on my functions.php I get an error saying that the bootstrap classes extended cannot be found and the theme breaks.. Any thoughts on how to go around this issue would be appreciated.
Thank you very much
Cinnamon Bernard says
Hi,
I know this is sort of an old post, but still quite new, I had a question about incorporating Twitter Bootstrap Sass, Font-Awesome Sass, with Underscores WordPress starter theme template.
I’ve tried to incorporate and placed all Sass files in their own directory, and have a separate output path for Css files, while keeping WordPress style.css in the root with an @import to the style.css within the Css folder.
After setting all of this up, the styles for bootstrap has not been working properly, I’m not certain if it is due to having a reset file. I was sure to place the bootstrap and font-awesome @imports at the top, followed by the others.
If possible, based on what I’ve provided, can you give advice on how to set up my workflow.
Thanks!
Rehan says
Awesome tutorial
Thanks
Ricardo Gutierrez says
Hello.
Is the ”reset” better than normalize ?
Thnks !
WPBeginner Support says
Reset would unset browser styles, while normalize uses a consistent style across browser. We think each developer would have their own preference. We would prefer to work with reset.
Administratör
Josh McClanahan says
Great article!
I was wondering if there is any kind of setup, like in php you have to add PEAR for various extensions, for using SASS especially when going live.
In other words is there anything that is needed to be included after compiling and going live?
Thanks for your help and this article.
WPBeginner Support says
No Josh, after compiling it generates the regular CSS output.
Administratör