Introductie van Sass voor nieuwe WordPress-thema-ontwerpers

Als nieuwe WordPress-themaontwerper leert u snel de uitdagingen van het onderhouden van lange CSS-bestanden terwijl u ze georganiseerd, schaalbaar en leesbaar houdt. Je zult ook leren dat veel ontwerpers en front-end ontwikkelaars aanbevelen een CSS preprocessor-taal te gebruiken zoals Sass of LESS. Maar wat zijn deze dingen? en hoe begin je ermee? Dit artikel is een inleiding tot Sass voor nieuwe WordPress Theme Designers. We zullen u vertellen wat een preprocessor voor CSS is, waarom u deze nodig hebt en hoe u deze meteen moet installeren en gebruiken.

Wat is Sass?

De CSS die we gebruiken, is ontworpen om een ​​eenvoudig te gebruiken stijlbladtaal te zijn. Web is echter geëvolueerd, en dus is het nodig dat ontwerpers een stijlbladtaal hebben waarmee ze meer kunnen doen met minder moeite en tijd. CSS preprocessor-talen, zoals Sass, staan ​​je toe om functies te gebruiken die momenteel niet beschikbaar zijn in de CSS, zoals het gebruik van variabelen, elementaire wiskundige operatoren, nesten, mixins, enz..

Het lijkt veel op PHP, een preprocessor-taal die een script op de server uitvoert en een HTML-uitvoer genereert. Op dezelfde manier verwerkt Sass .scss-bestanden vooraf om CSS-bestanden te genereren die door browsers kunnen worden gebruikt.

Sinds versie 3.8 zijn WordPress-modi voor het beheergebied geporteerd om Sass te gebruiken voor ontwikkeling. Er zijn veel WordPress-themawinkels en ontwikkelaars gebruiken Sass al om hun ontwikkelingsproces te versnellen.

Aan de slag met Sass voor WordPress Theme Development

De meeste thema-ontwerpers gebruiken de lokale ontwikkelomgeving om aan hun thema's te werken voordat ze het in een staging-omgeving of een live-server implementeren. Aangezien Sass een preprocessor-taal is, moet u het in uw lokale ontwikkelomgeving installeren.

Het eerste wat u hoeft te doen is Sass installeren. Het kan worden gebruikt als een commandoregel-tool, maar er zijn ook enkele leuke GUI-apps beschikbaar voor Sass. We raden u aan Koala te gebruiken. Dit is een gratis opensource-app die beschikbaar is voor Mac, Windows en Linux.

In het belang van dit artikel moet je een leeg thema maken. Maak gewoon een nieuwe map in / Wp-content / themes /. Je kunt het 'mytheme' noemen of wat je maar wilt. Maak binnen je lege themamap een nieuwe map en noem deze stylesheets.

In de map met stijlbladen, moet u een maken style.scss bestand met een teksteditor zoals Kladblok.

Nu moet je Koala openen en op het plus-pictogram klikken om een ​​nieuw project toe te voegen. Zoek vervolgens uw themamap en voeg deze toe als uw project. U zult merken dat Koala automatisch het Sass-bestand in uw stylesheets-map zal vinden en zal weergeven.

Klik met de rechtermuisknop op uw Sass-bestand en selecteer Stel het uitvoerpad in keuze. Selecteer nu de hoofdmap van uw themadirectory, bijvoorbeeld, / Wp-content / themes / Mytheme / en druk op enter. Koala genereert nu een CSS-uitvoerbestand in uw themamap. Om dit te testen, moet je je Sass-bestand openen style.scss in een teksteditor zoals Notepad en voeg deze code toe:

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

Nu moet je je wijzigingen opslaan en teruggaan naar Koala. Klik met de rechtermuisknop op uw Sass-bestand en de zijbalk verschuift aan de rechterkant. Om uw Sass-bestand te compileren, klikt u gewoon op de 'Compileren' knop. U kunt de resultaten zien door de style.css bestand in uw themamap, en het heeft de verwerkte CSS als volgt:

 lichaam font-family: arial, verdana, sans-serif;  

Merk op dat we een variabele hebben gedefinieerd $ fonts in ons Sass-bestand. Wanneer we nu een lettertypefamilie moeten toevoegen, hoeven we niet opnieuw de namen van alle lettertypen te typen. We kunnen gewoon gebruiken $ fonts.

Welke andere superkrachten brengt Sass naar CSS?

Sass is ongelooflijk krachtig, achterwaarts compatibel en super eenvoudig te leren. Zoals we eerder vermeldden, kunt u variabelen, nesten, mixins, import, partials, wiskundige en logische operatoren maken, enz. Nu zullen we u enkele voorbeelden laten zien, en u kunt ze uitproberen op uw WordPress-thema.

Meerdere stylesheets beheren

Een veelvoorkomend probleem waarmee u te maken krijgt als een WordPress-themaontwerper zijn grote stylesheets met veel secties. Je zult waarschijnlijk veel op en neer scrollen om dingen op te lossen terwijl je aan je thema werkt. Met Sass kunt u meerdere bestanden in uw hoofdstijlblad importeren en één CSS-bestand voor uw thema uitvoeren.

Hoe zit het met CSS @import?

Het probleem met het gebruik van @import in uw CSS-bestand is dat elke keer dat u een @import toevoegt, uw CSS-bestand een ander HTTP-verzoek aan de server doet. Dit heeft invloed op de laadtijd van uw pagina, wat niet goed is voor uw project. Aan de andere kant, wanneer u @import in Sass gebruikt, zal het de bestanden in uw Sass-bestand bevatten en ze allemaal in een enkel CSS-bestand voor de browsers dienen..

Als u wilt leren hoe u @import in Sass gebruikt, moet u eerst een reset.scss bestand in de stylesheets-directory van uw thema en plak deze code erin.

 / * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licentie: geen (public domain) * / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, groot, citeren, 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, vorm, label, legenda, tabel, bijschrift, tbody, tfoot, thead, tr, th, td, artikel, opzij, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, navigatie, uitvoer, robijn, sectie, samenvatting, tijd, markering, audio, video margin: 0; opvulling: 0; rand: 0; tekengrootte: 100%; lettertype: inherit; vertical-align: basislijn;  / * HTML5 weergave-rol reset voor oudere browsers * / artikel, opzij, details, figcaption, figuur, footer, header, hgroup, menu, nav, sectie display: block;  body line-height: 1;  ol, ul lijststijl: geen;  blockquote, q quotes: none;  blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; border-spacing: 0; 

Nu moet je je main style.scss-bestand openen en deze regel toevoegen waar je het resetbestand wilt importeren:

 @import 'reset'; 

Merk op dat u niet de volledige bestandsnaam hoeft in te voeren. Om dit te compileren, moet je Koala openen en nogmaals op de compileerknop klikken. Open nu het hoofdbestand style.css van het thema en je zult je reset css daarin zien staan.

Nestin in Sass

In tegenstelling tot HTML is CSS geen geneste taal. Met Sass kunt u geneste bestanden maken die eenvoudig te beheren en te gebruiken zijn. U kunt bijvoorbeeld alle elementen voor de nestelen sectie, onder de artikelselector. Als WordPress-themaontwerper kunt u op verschillende secties werken en elke elementen gemakkelijk vormgeven. Om nestin in actie te zien, voeg je dit toe aan je style.scss het dossier:

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

Na verwerking zal het de volgende CSS uitvoeren:

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

Als themaontwerper ontwerp je verschillende uiterlijken voor widgets, posts, navigatiemenu's, koptekst, enzovoort. Het gebruik van nestin in Sass maakt het goed gestructureerd en je hoeft niet dezelfde klassen, selectors en identifiers te schrijven en opnieuw.

Mixins gebruiken in Sass

Soms zou je een aantal CSS doorheen je project moeten hergebruiken, hoewel de stijlregels hetzelfde zullen zijn omdat je ze op verschillende selectors en klassen zult gebruiken. Dit is waar mixins van pas komen. Laten we een mix toevoegen aan je style.scss-bestand:

 @mixin hide-text overflow: verborgen; text-indent: -9000px; display: block;  

Deze mix verbergt in feite sommige tekst die wordt weergegeven. Hier is een voorbeeld van hoe je deze mixin kunt gebruiken om tekst voor je logo te verbergen:

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

Merk op dat je moet gebruiken @include om een ​​mix toe te voegen. Na verwerking zal het de volgende CSS genereren:

 .logo background: url ("logo.png"); hoogte: 100 px; breedte: 200 px; overloop verborgen; text-indent: -9000px; weergave: blok;  

Mixins zijn ook erg handig met voorvoegsels van leveranciers. Wanneer u dekkingswaarden of grensradius toevoegt, kunt u met mixins u veel tijd besparen. Bekijk dit voorbeeld, waar we een mixin hebben toegevoegd om een ​​randstraal toe te voegen.

 @mixin border-radius ($ radius) -webkit-border-radius: $ radius; -moz-border-radius: $ straal; -ms-border-radius: $ straal; -o-border-radius: $ straal; grensradius: $ straal;  .randgebutton @omvat randradius (10px);  .smallbutton @omvat randradius (5px);  

Na het compileren genereert het de volgende CSS:

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

We hopen dat dit artikel je interesse in Sass voor WordPress-themaontwikkeling heeft gewekt. Veel ontwerpers van WordPress-thema's gebruiken het al. Sommigen gaan zo ver om te zeggen dat in de toekomst alle CSS zal worden voorbewerkt en dat WordPress-themaontwikkelaars hun spel moeten verbeteren. Laat ons weten wat u vindt van het gebruik van een CSS-preprocessortaal zoals Sass voor uw WordPress-themaontwikkeling door een opmerking hieronder te laten.

Aanvullende bronnen

Sass Lang
De Sass Way