Share
In het eerste deel van de serie gaf ik een snel overzicht van de populaire preprocessors LESS en SASS. Ik heb ook de kaders behandeld waar ze meestal mee geassocieerd worden.
In het tweede deel van de serie deed ik een diepe duik in LESS en detailleerde enkele van zijn functies. We hebben variabelen, nesting en mixins besproken.
In dit deel van de serie zal ik ingaan op hoe je je logisch kunt structureren .minder bestanden. Ik zal ook bespreken hoe ze allemaal met behulp van importen kunnen worden aangesloten, en tenslotte snel dekking bieden voor vergroting.
We gaan een kindthema maken voor het standaard Twenty Twelve-thema. Voor degenen onder u die onbekend zijn met het maken van kindthema's, is het enige dat we nodig hebben om een kindthema te maken een style.css het dossier. Ga voor meer informatie naar de WordPress Codex.
Eerst willen we naar de themamap binnenin navigeren wp-content. Je zou het moeten zien twintig twaalf map binnenkant van hier. We gaan vervolgens een nieuwe map maken en deze een naam geven lessbuilt. Open die map.
In onze nieuwe lessbuilt map gaan we hier een map maken en deze een naam geven css. Open die map.
Binnenkant van de css map, maak nog een andere map met de naam minder en open het dan ook. In deze map willen we een nieuw bestand maken, style.less. Maak het open.
Controleer voor een controle of u nu het volgende pad naar uw hebt style.less het dossier:
wp-content / themes / lessbuilt / css / minder / style.less
Nu dat we de minder map gemaakt. We zullen al onze toevoegen .minder bestanden in deze map.
Het eerste dat we willen doen in onze style.less bestand is de code toevoegen zodat we kunnen aangeven dat we een kindthema maken. Voeg het volgende toe:
Accentsconagua
/ * Theme Name: Less Built Theme URI: http://wp.tutsplus.com Beschrijving: Kindthema voor het Twenty Twelve-thema Auteur: Jason Bradley Auteur URI: http://everchangingmedia.com Sjabloon: twentytwelve Versie: 0.1.0 * / @import url ("... /twentytwelve/style.css"); Dat is alles wat we nodig hebben om mee te beginnen. Vervolgens zullen we de andere creëren .minder bestanden en bind ze allemaal samen hier in style.less.
Het eerste bestand dat ik ga voorstellen, is een variables.less het dossier. Hier gaan we alle variabelen opslaan die we zullen gebruiken voor ons kindthema. Dit is toegankelijk voor al onze leden .minder bestanden in onze minder map.
Open het nieuwe bestand en plak het volgende in:
// variables.less // Colors @white: #fff; @gray: # 666; @ grijs-donker: # 333; @ grijs-licht: #eee; @blue: # 4d8b97; @ blauw-donker: # 335c64; // Inhoud @ body-background-color: @gray; @ body-kleur: @ grijs-licht; @ inhoud-achtergrondkleur: @ grijs-donker; // Header @ site-title-color: @white; @ site-title-color-hover: @blue; @ site-description-color: @ gray-light; // Links @ links-color: @blue; @ links-color-hover: @ blue-dark; // Navigatie @ menu-items-kleur: @ grijs-licht; @ menu-items-color-hover: @blue; @ menu-items-color-active: @white; // Berichten @ entry-title-color: @white; @ border-color: @gray; // Widgets @ search-form-background-color: @gray; @ search-form-border-colour: @gray; @ search-form-text-colour: @white;
Het volgende bestand dat we gaan maken is a mixins.less het dossier. De meerderheid van de wijzigingen die we zullen aanbrengen zijn de linkkleuren. Ik ga een mix maken die een linkkleur nodig heeft en de hover-kleur linkt. Het zal de styling teruggeven op basis van wat erin is overgegaan.
Maak eerst een mixins.less het dossier. Open dat bestand en plak het volgende erin:
// mixins.less .links (@ link-color: @blue, @ link-color-hover: @ blue-dark) a color: @ link-color; &: hover color: @ link-color-hover;
Het volgende bestand bevat verschillende stijlen, zoals het hoofdgedeelte en koppelingen. Maak een misc.less bestand en plak het volgende in:
// misc.less body background-color: @ body-background-color; kleur: @ body-kleur; .site achtergrondkleur: @ content-background-color; .links ();
We raden aan om alle navigatiestijlen bij elkaar te houden, zodat we snel weten waar we naartoe moeten om onze menu's te bewerken.
Maak een navigation.less bestand en voeg het volgende toe:
// navigation.less .main-navigation li .links (@ menu-items-color, @ menu-items-color-hover); . current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor a color: @ menu-items-color-active;
Vervolgens gaan we de stijl voor de titel en beschrijving van de site in de kop toevoegen.
Maak een header.less bestand en voeg het volgende toe:
// header.less .site-title a color: @ site-title-color; .site-header h1, h2 .links (@ site-title-color, @ site-title-color-hover); .site-header h2 color: @ site-description-colour;
Vervolgens zullen we wat styling voor onze berichten willen toevoegen. We zullen de titelkleur en de link-kleuren van de invoerkop en -voettekst wijzigen.
Maak een posts.less bestand en voeg het volgende toe:
// posts.less .site-content article border-bottom: 4px double @ border-colour; .entry-header .entry-title .links (@ entry-title-color); .entry-header, .entry-meta .links ();
We willen dat onze paginatitels ook wit zijn. Ik zou ook willen voorstellen dat je hier ook stijlverschillen invoert die je wilt voor pagina's versus posts.
Maak een pages.less bestand en voeg het volgende toe:
// pages.less .entry-header .entry-title color: @ entry-title-color;
Ik wilde een rand toevoegen aan de linkerkant van de zijbalk, dus ik ga dat toevoegen in a sidebar.less het dossier. Maak dat bestand en voeg het volgende toe:
// sidebar.less #secondary border-left: 1px solid @ border-colour; padding-links: 20px;
We willen de widgettitels wit maken en ervoor zorgen dat de links in onze widgets overeenkomen met de andere links in ons kindthema. Ik wil ook de kleuren van het zoekformulier wijzigen.
Er wordt voorgesteld om elke stijl voor widgets in te voegen widgets.less en houd de styling voor de container om hen heen in sidebar.less.
Maak een widgets.less bestand en voeg het volgende toe:
// widgets.less .widget-area .widget .widget-title color: @ gray-light; .links (); // Zoekformulier # s, #searchsubmit background: @ search-form-background-color; border-colour: @ search-form-border-colour; kleur wit;
Het laatste bestand dat we gaan maken is footer.less. Het bevat elke vorm van styling voor het thema van ons kind.
Maak een footer.less bestand en voeg het volgende toe:
// footer.less footer [role = "contentinfo"] .links ();
Dus we hebben al onze individuen gecreëerd .minder bestanden om onze stylingveranderingen op te splitsen in een logische structuur. Je had dat moeten zien toen we onze bestanden aan het maken waren, we gebruikten de variabelen die we hebben gemaakt variables.less in al onze andere .minder bestanden. We hebben ook onze .koppelingen () mixin van mixins.less veel ook.
De manier waarop we al deze verbinden .minder bestanden samen is door invoer te gebruiken.
Invoer in CSS en LESS is net als in andere talen. U vertelt uw compiler dat u wilt dat uw huidige bestand andere bestanden kent en gebruikt. Het is net als het importeren van een bibliotheek of raamwerk dat u gebruikt in .NET, Ruby edelstenen, enz.
De syntaxis voor het importeren van een bestand met LESS is net als bij CSS. Sinds al onze .minder bestanden zitten in dezelfde map, we zullen het volgende gebruiken:
@import "filename.less";
Dit zal onze LESS-compiler zeggen dat wanneer je dit bestand compileert, je dit andere bestand ook zou moeten gebruiken.
In onze style.less bestand, we willen invoer toevoegen voor elk van de .minder bestanden die we hebben gemaakt. Dit zorgt er ook voor dat elk .minder bestand dat u importeert style.less zal ook worden verbonden.
Bijvoorbeeld als we importeren variables.less en widgets.less in onze style.less bestand, de variabelen die we hebben gedefinieerd in variables.less zal toegankelijk zijn in widgets.less.
/ * Theme Name: Less Built Theme URI: http://wp.tutsplus.com Beschrijving: Kindthema voor het Twenty Twelve-thema Auteur: Jason Bradley Auteur URI: http://everchangingmedia.com Sjabloon: twentytwelve Versie: 0.1.0 * / // Importeer bovenliggende themastijlen @import url ("... /twentytwelve/style.css"); /* /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ INHOUD /\/\/\/\/\/\/ \ / \ / \ / \ / \ / \ / \ / \ // \ / \ / \ / \ 1. Diverse - Variabelen - Mixins - Misc 2. Navigatie 3. Header 4. Berichten 5. Pagina's 6. Zijbalk 7. Widgets 8. Voettekst * / / * ------------------------------------------ ---------------------------- 1. Variellanous * / // Variables @import "variables.less"; // Mixins @import "mixins.less"; // Misc @import "misc.less"; / * ------------------------------------------------ ---------------------- 2. Navigatie * / @ import "navigation.less"; / * ------------------------------------------------ ---------------------- 3. Header * / @import "header.less"; / * ------------------------------------------------ ---------------------- 4. Posts * / @import "posts.less"; / * ------------------------------------------------ ---------------------- 5. Pages * / @import "pages.less"; / * ------------------------------------------------ ---------------------- 6. Sidebar * / @import "sidebar.less"; / * ------------------------------------------------ ---------------------- 7. Widgets * / @import "widgets.less"; / * ------------------------------------------------ ---------------------- 8. Voettekst * / @import "footer.less"; Nu dat we al onze hebben .minder bestanden gemaakt en allemaal geïmporteerd in onze style.less bestand, zullen we het uitvoerpad van willen instellen style.less in CodeKit.
We hebben besproken hoe de output van onze .minder bestand in het vorige bericht.
Het mooie van het gebruik van LESS voor het maken en compileren van je CSS is dat je kunt kiezen in welke indeling je wilt compileren. Dit betekent dat je het kunt compileren in zijn reguliere vorm of je bestanden kunt verkleinen.
Het is zeker aan te raden om al uw sites te verkleinen .css bestanden. Hoe kleiner het bestand, hoe sneller uw site wordt geladen. U wilt de kleinste bestandsgrootte omdat elke pagina niet wordt geladen en gezien door de gebruiker tot de .css bestanden zijn geladen. De laadsnelheid van uw pagina heeft ook invloed op uw SEO.
Met CodeKit is het veranderen van de instelling voor uw uitvoer naar verkleinen net zo eenvoudig als het wijzigen van de Output stijl naar Minified. Nu elke keer dat je een wijziging aanbrengt in een van je .minder bestanden, codeert CodeKit ze automatisch en verkleint ze naar uw kindthema's style.css het dossier.
Ik heb de beste werkwijzen voor het structureren van je besproken .minder bestanden in uw thema of kindthema. Ik heb ook gesproken over de mappenstructuur en waar je je kunt plaatsen .minder bestanden.
Ik stapte je door het maken van alle .minder bestanden en besproken hoe ze allemaal te verbinden met uw style.less bestand met import. Ten slotte heb ik gesproken over waar het outputpad van je ingesteld moet worden style.less bestand en hoe CodeKit je te verkleinen .minder bestanden wanneer het compileert.
Ik heb ook de lessbuilt kindthema naar GitHub zodat je het kunt splitten of downloaden.
