Share
In dit artikel gaan we kijken hoe Sass en Compass kunnen worden gebruikt in ons WordPress-themaontwikkelingsproces. We zullen onze themastijlen op SMACSS-wijze structureren en zullen de kracht van Compass gebruiken om beeldsprites te genereren voor zowel netvlies- als niet-retina-apparaten.
Merk op dat dit artikel geen introductie is van Sass; als je echter een beginner bent, kun je nog steeds meegaan.
Voordat we instappen, moet Sass and Compass op uw computer zijn geïnstalleerd. Als u ze nog niet hebt geïnstalleerd, volgt u de instructies op:
Er zijn weinig op GUI gebaseerde Sass- en Compass-applicaties, maar ik zal de terminal gebruiken (als u Windows gebruikt, kunt u de opdrachtprompt gebruiken). Voel je vrij om de tool te gebruiken waarmee je het meest comfortabel bent.
Laten we beginnen met het maken van een map voor ons project. Maak een nieuwe map op uw bureaublad en noem die tutsplus. Binnenin creëren twee nieuwe mappen: sass en afbeeldingen. De sass map bevat onze Sass-bestanden die ons themastijlblad vormen, de style.css.
Open de afbeeldingen map en maak twee nieuwe mappen voor onze themapictogrammen. Roep de mappen op pictogrammen en pictogrammen @ 2x. Later zullen we de afbeeldingen in deze mappen gebruiken om een afbeelding te maken voor ons thema. Op dit punt ziet uw mappenstructuur er als volgt uit:
De mappenstructuurWe zullen Compass gebruiken voor kijk maar voor bestandswijzigingen binnen de sass map en, wanneer een verandering optreedt, zal het Sass gebruiken om onze stylesheets te compileren. Telkens wanneer we Compass starten, zoekt het naar een configuratiebestand in de huidige map. Dat bestand wordt gebeld config.rb.
Om het configuratiebestand te maken, opent u uw terminal / opdrachtprompt en navigeert u naar uw tutsplus map op uw bureaublad:
cd / Desktop / tutsplus /
Volgende bel de compass config config.rb commando. Deze opdrachtvulling genereert het configuratiebestand voor u. Open het bestand in uw favoriete teksteditor en breng de volgende wijzigingen aan:
Accentsconagua
css_dir = "stylesheets" naar: css_dir = "/". Dit zal het Kompas vertellen om de gegenereerde CSS-bestanden binnen onze themawortelmap uit te voeren, omdat dit is waar de WordPress naar onze thema's zal zoeken style.css.output_style =: uitgebreid.relative_assets = true en line_comments = false.Sla uw wijzigingen op. Nu jij config.rb bestand moet er als volgt uitzien:
# Vereist hier extra kompas plug-ins. # Stel dit in op de root van uw project wanneer het wordt geïmplementeerd: http_path = "/" css_dir = "/" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts" # U kunt hier uw gewenste uitvoerstijl selecteren (kan worden overschreven via de opdrachtregel): # output_style =: expanded of: nested of: compact of: gecomprimeerd output_style =: expanded # Om relatieve paden naar assets in te schakelen via de kompashelperfuncties. Uncomment: relative_assets = true # Foutopsporing bij opmerkingen uitschakelen die de oorspronkelijke locatie van uw selectors weergeven. Uncomment: line_comments = false # Als u de inspringende syntaxis verkiest, wilt u misschien dit # project opnieuw doorgeven --syntax sass regenereren, of u kunt dit als volgt corrigeren: # preferred_syntax =: sass # en voer dan uit: # sass-convert -R --van scss - naar sass sass scss && rm -rf sass && mv scss sass
Okee! Nu we het configuratiebestand hebben, is het de tijd om ons eerste Sass-bestand te maken. Maak een nieuw bestand binnen de sass map en bel het style.scss. Start vervolgens uw Terminal en navigeer naar de / Desktop / tutsplus / directory.
Voer de kompas kijken commando. Met deze opdracht wordt een proces gestart dat voortdurend naar Sass-bestandswijzigingen in onze bestanden zoekt sass map. Hij zal onze vinden style.scss bestand en output zijn CSS-weergave als style.css in onze tutsplus directory.
Merk op dat alle bestanden in onze sass map die namen niet begint met underscore zal worden verwerkt en uitgevoerd in de tutsplus map. Dit is precies wat we willen voor de style.scss het dossier.
Een belangrijk ding om te onthouden: maak geen directe wijzigingen in de gegenereerde CSS-bestanden, omdat uw wijzigingen verloren gaan als u uw Sass-bestanden opnieuw compileert.
We gaan onze scheiden style.scss in kleine componenten met behulp van de stijlgidsen gedefinieerd in SMACSS (Schaalbare en modulaire architectuur voor CSS). De auteur van SMACSS is Jonathan Snook en hij heeft een boek over dit onderwerp gepubliceerd dat ik u aanmoedig te lezen. Als u lid bent van Tuts +, kunt u hier een kopie van downloaden.
SMACSS categoriseert uw CSS-regels in vijf groepen:
Laten we een map maken voor elk van die categorieën binnen onze sass map. Gebruik de volgende namen: baseren, lay-outs, modules, staten en thema's.
Onze SMACSS-mapstructuurIn uw baseren map, zet al uw stylesheets die voldoen aan de SMACSS Base Style Rules. Die stylesheets moeten alleen stijlen toepassen op elementselectoren. Dit is ook een goede plaats om uw browser opnieuw in te stellen op CSS.
Compass wordt geleverd met browserreset op basis van het resetblad van Eric Meyer. Voor dit project ga ik normalize.css gebruiken. Download de normalize.css bestand en plaats het in de baseren map en geef de naam ervan opnieuw _normalize.scss. Zorg ervoor dat je de bestandsextensie wijzigt van css naar SCSS.
Vervolgens moeten we het importeren normaliseren stylesheet in onze style.scss. Open hiervoor de style.scss en voeg toe:
// Base @import "base / normalize";
Zoals u ziet, laten we het onderstrepingsteken weg in de bestandsnaam en de bestandsextensie. De preprocessor van Sass is slim genoeg om het bestand dat we wilden importeren.
Plaats hier je themalay-outstijlen. Dit omvat bijvoorbeeld uw header-, zijbalk-, voettekst- en paginalay-outs als _header.scss, _sidebar.scss, _footer.scss en _page.scss.
U kunt de l- voorvoegsel voor uw lay-outklasse-namen:
// _header.scss .l-main-header margin: 30px; opvulling: 20px; lettergrootte: 16px; // _navigation.scss. l-main-nav position: relative;
Dit is ook een goede plaats voor uw grid stylesheet. U kunt ook meer lezen over de SMACSS-lay-outregels.
Modules zijn herbruikbare inhoudselementen. Een blogbericht is bijvoorbeeld een module omdat de regels ervan worden hergebruikt op meerdere exemplaren van dezelfde module. Widgets, shortcodes en pictogrammen zijn ook een type module.
Een module kan submodules bevatten. Hier is een voorbeeld van widget-module en de titel-submodule:
.widget opvulling: 10px; .widget__title font-size: 15px;
Hier gebruiken we de BEM-naamgevingsconventie (Block Element Modifier).
Plaats hier uw stylesheets die het uiterlijk van uw elementen bepalen, afhankelijk van een bepaalde staat. Als u hier een responsieve themaplaats bouwt, vraagt uw media een stylesheet.
Laten we er nu een maken.
Maak een nieuw bestand in uw teksteditor en sla het op als _media_queries.scss in de / Sass / staten / map. Plak deze algemene regels voor schermgrootte in het bestand:
/ *! = Media Queries ----------------------------------------------- --------------- * / / * 956-768px * / @media alleen scherm en (min-breedte: 768px) en (max-breedte: 959px) / * 767- 480px * / @media alleen scherm en (min-breedte: 480px) en (max. Breedte: 767px) / * 479px * / @media alleen scherm en (max-breedte: 479px)
Vergeet niet om onze nieuw gemaakte stylesheet te importeren in onze style.scss het dossier:
// Base @import "base / normalize"; // States @import "states / media_queries"
Als u bijvoorbeeld een navigatie-menu buiten het scherm hebt, kunt u hier de stijlen instellen die het uiterlijk bepalen tijdens uw navigatie .is geopend of .is gesloten, maar in de meeste gevallen zet je die in de lay-out of het modulebestand voor de navigatie buiten het canvas.
Dit is een goede plaats om de stijlen van uw aangepaste WordPress-plug-ins in te stellen. Hier kunt u bijvoorbeeld uw aangepaste stijlen voor bijvoorbeeld de plug-in Contact formulier 7 plaatsen.
Elk WordPress-thema's style.css bestand moet meta-informatie bevatten over het thema zoals thema-naam, auteur, versie en meer. We kunnen gebruikmaken van de Sass-variabelen om die informatie te wijzigen voor elk thema dat we maken.
Maak eerst een nieuw bestand met de naam _vars.scss en sla het op in de sass map. In dit bestand zullen we al onze variabelen zetten. Als u vindt dat dit bestand te groot wordt, scheidt u de inhoud ervan in kleinere bestanden.
Open het nieuw gemaakte bestand en voer de volgende variabelen in:
// Thema-informatie // -------------------------------------------- // $ theme_name: "My Theme"; $ theme_uri: "#"; $ theme_description: "My WordPress Theme"; $ theme_version: "1.0"; $ theme_author: "mijn naam"; $ theme_author_uri: "#"; $ theme_license: "GPL"; $ theme_tags: "responsive-layout, post-formats";
Nu moeten we een bestand maken dat de bovenstaande variabelen gebruikt. Gebruik een teksteditor naar keuze en maak een nieuw bestand met de naam _theme_info.scss en sla het op in de sass map. Vul de _theme_info.scss met de volgende inhoud:
/ *! Theme Name: # $ theme_name Theme URI: # $ theme_uri Beschrijving: # $ theme_description Versie: # $ theme_version Auteur: # $ theme_author Auteur URI: # $ theme_author_uri Licentie: # $ theme_license Licentie-URI: License.txt-tags: # $ theme_tags * /
De laatste stap is het importeren van onze nieuw gemaakte bestanden in de style.scss, laten we ook de Compass-componenten importeren:
@import "kompas"; @import "vars"; @import "theme_info"; // Base @import "base / normalize"; // States @import "states / media_queries";
Nu als u de verwerkte opent style.css bestand bevat het blok voor de blok met themagegevens van WordPress met de variabelenwaarden die u instelt _vars.scss het dossier.
Het is een goede gewoonte om meer kleine meer algemene CSS-klassen te gebruiken om een element te stijlen in plaats van een te specifieke selector te gebruiken. Volg de DROGE - Do not Repeat Yourself beginsel. We kunnen een stylesheet maken voor onze kleine helperklassen. Om u een voorbeeld te geven, zal ik een aantal helpdesk lay-out en typografie definiëren.
Maak een nieuw bestand met de naam _helpers.scss en sla het op in de sass map. Nogmaals, net als bij het variabelenbestand, is het handig om het te splitsen in kleinere bestanden als uw helperbestand te groot wordt om te onderhouden.
Open het nieuw gemaakte bestand en plak het in:
/ *! = Helpers ------------------------------------------------ -------------- * / // Layout // ----------------------------- --------------- // .links float: links; .recht float: right; .helder duidelijk: beide; .hide display: none; .hidden dekking: 0; zichtbaarheid: verborgen; .clearfix &: before, &: after content: ""; weergave: tafel; &: na clear: both; .center-block display: block; marge: 0 auto; // Typografie // -------------------------------------------- // .f-normaal font-weight: normaal; .f-bold font-weight: bold; .f-italic font-style: italic; .t-strike text-decoration: line-through; .t-overline text-decoration: overline; .t-onderstrepen text-decoration: onderstrepen; .t-left text-align: left; .t-right text-align: right; .t-center text-align: center;
Zoals je hier kunt zien, gebruiken we f- voorvoegsel voor lettertype-gerelateerde klassen en t- voor tekstgerelateerde klassen. Sla uw bestand op en importeer het in de style.scss:
@import "kompas"; @import "vars"; @import "theme_info"; // Base @import "base / normalize"; // Helpers @import "helpers"; // States @import "states / media_queries";
Compass wordt geleverd met handige methoden voor het genereren van afbeeldingssprites. We zullen onze iconen in onze plaatsen pictogrammen en pictogrammen @ 2x mappen, waarbij de laatste dezelfde pictogrammen zal bevatten maar tweemaal groter is voor apparaten met een retina-display.
Voor dit voorbeeld plaats ik twee pictogrambestanden: checkmark.pngen star.png die u kunt vinden in het downloadpakket dat bij dit bericht hoort.
De pictogrammenVoor elk pictogram genereren we een afzonderlijke CSS-klasse met behulp van een Sass-lijst met alle namen van pictogramnamen. Open de _vars.scss bestand en voeg de volgende code toe:
// Pictogrammen // -------------------------------------------- / / // map * .png pictogrambestanden $ icons_sprite: sprite-map ("icons / *. png"); $ icons_sprite2x: sprite-map ("icons@2x/*.png"); // genereer de pictogrammen sprites $ sprites_file: sprite-url ($ icons_sprite); $ sprites2x_file: sprivals-url ($ icons_sprite2x); $ sprites_url: url ("images /" + sprite-path ($ icons_sprite)); $ sprites2x_url: url ("images /" + sprite-path ($ icons_sprite2x)); // lijst met bestandsnamen van themapictogrammen (te vinden in pictogrammen en pictogrammen @ 2x mappen) $ theme_icons: ("vinkje", "ster");Compass vindt alle * .png beeldbestanden in onze iconenmappen en genereert twee beeldsprites in de afbeeldingen map. Nu willen we CSS-klassen genereren voor die afbeeldingen.
Om de positie van het pictogram in de sprite-afbeelding te vinden, zullen we twee helper-mixins maken. Om dat te doen, maakt u een nieuw bestand en belt u het _mixins.scss open het en plak in de volgende code:
// Pictogrammen // -------------------------------------------- / / @mixin sprite_icon ($ name, $ sprite) @ include sprite-dimensions ($ sprite, $ name); achtergrond-positie: sprite-positie ($ sprite, $ naam); @mixin retina_sprite_icon ($ name, $ sprite) $ pos: sprite-position ($ sprite, $ name); background-position: nth ($ pos, 1) nth ($ pos, 2) / 2; @ include background-size (ceil (image-width (sprite-path ($ sprite)) / 2) auto);
Beide mixins accepteren een pictogramnaam plus een sprite-kaart als argumenten. Deze mixins stellen de breedte, hoogte en de achtergrondpositie in voor het pictogram in de gegenereerde afbeeldingssprite. De retina_sprite_icon zal ook de juiste achtergrondgrootte voor de retina-pictogrammen instellen.
Nu is het tijd om onze pictogrammenklassen te genereren. Maak een nieuw bestand met de naam _icons.scss en sla het op in de / Sass / modules / map. Plak vervolgens in de volgende inhoud:
/ *! = Pictogrammen ------------------------------------------------ -------------- * / @if (length ($ theme_icons)> 0) .icon display: inline-block; achtergrond: $ sprites_url no-repeat; @each $ icon in $ theme_icons . # "icon--" + $ icon @include sprite_icon ($ icon, $ icons_sprite); @media only-scherm en (-webkit-min-device-pixel-ratio: 2), alleen scherm en (min-moz-device-pixel-ratio: 2), alleen scherm en (-o-min-apparaat -pixelverhouding: 2/1), alleen scherm en (min-apparaat-pixel-ratio: 2), alleen scherm en (min-resolutie: 192dpi), alleen scherm en (min-resolutie: 2dppx) .icon achtergrond: $ sprites2x_url; @each $ icon in $ theme_icons . # "icon--" + $ icon @ include retina_sprite_icon ($ icon, $ icons_sprite2x);
Hier lopen we door onze lijst met pictogramnamen die wordt geïdentificeerd door $ theme_icons en het genereren van zowel retina- als niet-retina-stijlregels met behulp van onze pictogrammixins. Van daaruit genereren we een klasse genaamd .icoon dat is de basismodule voor onze pictogrammen en vervolgens de moduleklassen van modules voor elk pictogram in de lijst.
In dit voorbeeld genereert het de .icon - vinkje en .icon - ster klassen. Hier is een voorbeeld van het gebruik van het sterpictogram:
Laten we tot slot onze mixins en pictogrammenmodule importeren in de style.scss het dossier:
@import "kompas"; @import "vars"; @import "mixins"; @import "theme_info"; // Base @import "base / normalize"; // Helpers @import "helpers"; // Modules @import "modules / pictogrammen"; // States @import "states / media_queries";
Sass en Compass zijn beide krachtige hulpprogramma's en kunnen een lange weg helpen bij het verbeteren van uw WordPress-themaontwikkeling en de ontwikkeling van WordPress-plug-ins. Deze handleiding is bedoeld om u op weg te helpen naar een verfijnder proces voor het werken met WordPress.
Voor diegenen die nieuwsgierig zijn en meer willen lezen over een deel van de informatie die in deze tutorial aan bod komt, bekijk dan de volgende artikelen:
