Share
Ik vind het bijzonder interessant wanneer andere ontwikkelaars hun workflowtips en -tricks delen. Het kan erg handig zijn om een kijkje te nemen in de ontwikkelingswereld van iemand anders en erachter te komen welke hulpmiddelen ze gebruiken om hun eigen leven gemakkelijker te maken.
Welnu, vandaag laat ik je een deel van mijn eigen workflow zien - specifiek hoe Sass en Compass te gebruiken bij het ontwikkelen van een WordPress-thema. In plaats van alleen de benodigde configuratie en tools uit te leggen, dacht ik dat het beter was om helemaal opnieuw te beginnen en u precies te laten zien wat nodig is om aan de slag te gaan bij het ontwikkelen van een WordPress-thema dat Sass en Compass gebruikt..
Ik hoop dat dit artikel interessant voor je klinkt en ik kijk er naar uit om een klein deel van mijn werkstroom met je te delen - ik moedig je aan hetzelfde te doen.
Na veel experimenten is dit de beste tool voor cross-platform ondersteuning van Sass en Compass. Dit is een app met alleen de menubalk waarmee Sass-bestanden in CSS kunnen worden gecompileerd (deze heeft ook live-reload). Het is niet gratis, maar voor $ 10,00 heb ik het meer dan de moeite waard gevonden.
In het belang van het bieden van een oplossing voor allemaal lezers, ongeacht platform, biedt deze tutorial configuratie voor de hierboven genoemde app. Er zijn natuurlijk nog andere alternatieven, maar houd er rekening mee dat dingen misschien een iets andere configuratie nodig hebben dan wat je hier ziet.
De _s thema is een ontwerploos thema dat perfect geschikt is voor ontwikkelaars. Zoals vermeld op hun website: "Ik ben een thema dat bedoeld is voor hacken, dus gebruik me niet als een ouderenthema." - Klinkt perfect voor ons. Ga naar hun website, _s-thema en gebruik de opdracht 'Genereren' op hun startpagina om een aangepaste versie te downloaden. Je zou het thema gewoon rechtstreeks vanuit GitHub kunnen downloaden, maar dan zou je handmatig naar alle instanties van moeten zoeken _s binnen het thema en vervang ze door uw eigen voorvoegsel. Als u 'Genereren' gebruikt, wordt dat automatisch voor u gedeeld.
Zodra u uw aangepaste build hebt gedownload, unzip dan de themamap naar wp-content / themes. Voor deze zelfstudie heb ik de generator gebruikt om het thema te maken wp-tuts en de mappenstructuur zou er nu als volgt uit moeten zien:
U kunt nu doorgaan en het thema activeren via het beheerdersdashboard.
In de hoofdmap van het thema hebben we een map met de naam sass. Hier plaatsen we al onze .SCSS bestanden. Compass.app kijkt dan naar die map en compileert alles in de single style.css bestand dat in de hoofdmap van het thema leeft.
Dit zijn de instellingen die goed werken met WordPress:
/ * config.rb in de root van het thema. * / css_dir = "/" sass_dir = "sass" output_style =: gecomprimeerd
Ok, we hebben onze sass map en onze config.rb beide zitten in de wortel van ons thema. We zijn nu klaar om het CSS-bestand van het thema uit elkaar te halen en individuele bestanden te maken die in de toekomst eenvoudiger te bouwen / te onderhouden zijn.
Een van de voordelen van het gebruik van een CSS-preprocessor is de mogelijkheid om onze CSS op te delen in vele kleine bestanden. Dit helpt onze workflow enorm, omdat we onze code kunnen indelen in gerelateerde brokken die gemakkelijker te onderhouden en te gebruiken zijn. Dus in plaats van alles in één gigantisch CSS-bestand te proppen, kunnen we een apart bestand hebben dat alleen voor is resets. Dan kunnen we ook een apart bestand hebben dat alleen de menu, een bestand voor media, etc. etc. We kunnen er zoveel hebben .SCSS bestanden zoals we willen, en na compilatie zullen ze allemaal worden gecomprimeerd tot een enkele style.css.
Als je naar de style.css bestand dat wordt geleverd met het thema dat we hebben gedownload, kunt u zien dat de auteur opmerkingen heeft geplaatst om de inhoud te scheiden in secties zoals deze:
/ * = Inhoud ---------------------------------------------- - * / .sticky .hentry margin: 0 0 1.5em;
We gebruiken deze opmerkingen als een gids om dit stylesheet op te splitsen .SCSS bestanden.
Binnen de sass map, maak een bestand aan met de naam style.scss - Dit is het bestand dat we zullen gebruiken om alle andere bestanden te importeren. Dit is ook de enige SCSS bestand dat NIET voorafgegaan wordt door een onderstrepingsteken ("_"). Dit vertelt onze compiler dat dit bestand moet worden omgezet in een daadwerkelijk CSS-bestand.
Loop nu door de style.css bestand en voor elke sectie met opmerkingen, maak een nieuw bestand in de sass map die wordt voorafgegaan door een onderstrepingsteken en heeft de bestandsextensie .SCSS. Kopieer de inhoud van die sectie naar het zojuist gemaakte bestand.
Waar zie je dit bijvoorbeeld in de style.css, je zou een bestand maken met de naam _navigation.scss en zet het in de sass map:
/ * = Navigatie ---------------------------------------------- - * / .site-content [class * = "navigation"] margin: 0 0 1.5em; overloop verborgen; [class * = "navigation"] .previous float: left; breedte: 50%; [class * = "navigatie"] .next float: right; text-align: right; breedte: 50%; / * Eindigt als zijnde sass / _navigation.scss * /
Nadat u het volledige stylesheet hebt doorlopen, wordt uw sass directory zou er nu zo uit moeten zien. (Let erop dat style.scss is het enige bestand dat niet is voorafgegaan door een onderstrepingsteken, al het andere wordt beschouwd als een gedeeltelijk, en zal niet worden gecompileerd in een afzonderlijk CSS-bestand.)
Nu we alle CSS in afzonderlijke SCSS-bestanden hebben gezet, moeten we deze nu importeren in de style.scss bestand en voeg ook de thema-informatie toe.
/ *! Naam van het thema: wp-tuts Thema URI: http://underscores.me/ Auteur: Underscores.me Auteur URI: http://underscores.me/ Beschrijving: Beschrijving Versie: 1.0 Licentie: GNU General Public License License URI: license. txt Tags: * / @import "reset"; @import "global"; @import "menu"; @import "inhoud"; @import "terzijde"; @import "media"; @import 'navigatie'; @import 'comments'; @import 'widgets'; @import 'scrollen';
Zorg ervoor dat deze bestanden in dezelfde volgorde worden geïmporteerd als de CSS in het originele document. Je kunt zien dat we beginnen met reset en voeg de rest toe in de juiste volgorde. Je moet nog steeds nadenken over de volgorde waarin regels worden gedefinieerd in de uiteindelijke CSS!
Belangrijk: Let ook op het uitroepteken (
Accentsconagua
!) op de eerste regel. Dit vertelt de compiler niet om deze belangrijke opmerking te verwijderen. We moeten dit doen omdat we eerder de optie hebben ingesteld output_style =: gecomprimeerd (in de config.rb het dossier). Dit betekent dat alle witruimte en opmerkingen uit de gecompileerde versie worden verwijderd. Dit is iets geweldigs en je wilt zeker dat dit gebeurt - maar niet hier! Als dit commentaar door de compiler is verwijderd, herkent WordPress dit thema niet. We hebben al het handmatige werk gedaan, nu is het tijd om de automatisering in het spel te brengen. Ga je gang en verwijder de style.css bestand uit de root van het thema omdat we het niet langer nodig hebben. Nu, als je alle bovenstaande stappen met succes hebt gevolgd, zou je je moeten kunnen openen Compass.app en kies Bekijk een map. Selecteer de hoofdmap van uw thema (in ons geval is dit de wp-tuts map binnenkant van wp-content / themes)
Na een zeer korte vertraging zou u een nieuwe moeten zien style.css bestand dat is gegenereerd. Open het en je zou een verkleinde versie moeten zien. Dit is een indicatie dat alles werkte zoals verwacht.
Op dit punt hebben we de basis-CSS omgezet in kleine, beheersbare stukjes code en nu zullen we kijken naar het gebruik van Compass met ons project.
Compass is een framework dat veel krachtige functies biedt om uw leven gemakkelijker te maken bij het maken van CSS. Omdat we gebruiken Compass.app, we kunnen de functionaliteit van Compass inbrengen door simpelweg de vereiste module in ons te importeren style.scss het dossier. Als u bijvoorbeeld de CSS3-modules van Compass wilt, doet u dit gewoon:
/ * Maak dit de eerste importeer je, dan zal het beschikbaar zijn voor alle bestanden. * / @import "compass / css3";
Dat is het echt, nu kunt u naar de Compass-website gaan en als u klaar bent om een van de functies in uw project te gebruiken, weet u precies hoe u het moet doen.
Je hebt nu alles wat je nodig hebt om Sass en Compass te gebruiken bij het bouwen van thema's in WordPress. Vervolgens zullen we een paar zeer eenvoudige voorbeelden bekijken van hoe ze te gebruiken en terwijl deze tutorial is niet een inleiding tot Sass en Compass, de onderstaande voorbeelden zouden beginners moeten helpen de voordelen van het gebruik van een CSS-pre-processor verder te herkennen.
Omdat we nu gebruik maken van de kracht van een pre-processor, kunnen we efficiënter zijn bij het schrijven van CSS en voorkomen dat we onszelf herhalen. Een van de dingen die ik heb bij elk WordPress-project is een _vars.scss bestand waar ik alles zou behouden wat projectspecifiek is in variabelen. Op die manier kan ik in veel bestanden naar de namen van de variabelen verwijzen en moet ik iets veranderen, ik zou het alleen op één plek hoeven doen.
/ * Voorbeeld van de soorten dingen die u zou kunnen doen wat u in _vars.scss * / $ merkkleur zou kunnen stoppen: # 56483B; $ standaard-opvulling: 24px;
Om ze te gebruiken in uw gehele verzameling .SCSS bestanden, gewoon @importeren het lijkt op elk ander bestand style.scss, maar zorg ervoor dat het de eerste is, of net erna reset zou ook goed zijn. Zodra u het hebt geïmporteerd, gebruikt u de variabelen zoals deze:
/ * In elk bestand dat NA _vars.scss is geïmporteerd, kunt u al uw variabelen * / .logo color: $ brand-color gebruiken
Vaak zullen veel mensen Compass alleen gebruiken voor zijn vendor-prefixing-mogelijkheden. Ik val zelf in die categorie en hier is een klein voorbeeld om te laten zien waarom:
/ * Zonder kompas * / * -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; / * Met Compass * / * @include box-sizing (border-box);
Ik hoop dat deze tutorial behulpzaam is geweest bij het tonen van een eenvoudige maar effectieve workflow bij het gebruik van Sass en Compass in WordPress. De twee voorbeelden die ik aan het einde heb gegeven zijn de absolute basics van het gebruik van Sass en Compass en u moet beide afzonderlijk bekijken om er volledig gebruik van te maken.
Door dat te zeggen, zult u nog steeds uw workflow aanzienlijk verbeteren met wat u hier hebt geleerd. Door deze tools te gebruiken om CSS op te delen in kleine bestanden, variabelen te gebruiken om herhalingen te verminderen en de noodzaak te verwijderen om voorvoegsels van leveranciers in te voeren - bent u op weg naar een betere ontwikkelingsworkflow.
