Share
Less.CSS wordt een populaire tool om stylesheets "dynamisch" te maken. Ik werk al een tijdje met het integreren van Less.CSS met WordPress, dus vandaag gaan we een korte tutorial bekijken over hoe je aan de slag kunt gaan met het gebruik ervan en het BluePrint CSS-framework voor een snellere workflow in WordPress.
Ik weet wat je denkt, maar sorry mensen, het betekent niet dat je gewoon LESS code schrijft. Hoe vaak heb je aan een project gewerkt en wilde je dat je dingen kon vereenvoudigen door een functie op te nemen in je CSS-bestand, met behulp van een aantal variabelen om kleuren of andere eigenschappen te wijzigen, of andere programmeertechnieken? Met Less CSS kan uw wens worden omgezet in realiteit.
Less is een CSS-tool waarmee u uw ontwikkeling kunt versnellen en vereenvoudigen door u variabelen, overerving (via mixins), functies (bewerkingen) en meer te laten gebruiken. In een notendop geeft Less CSS u de mogelijkheid om programmeertechnieken te combineren met uw CSS. Genoeg gepraat. Laten we beginnen!
Minder komt in twee hoofdaroma's, een gecompileerde versie en een versie met JavaScript. Voor het doel van onze discussie zullen we ons concentreren op de gecompileerd versie. Ik heb ervoor gekozen om me vooral op deze versie te concentreren omdat ik het niet leuk vind om bestanden op mijn site op te nemen die ik niet hoef te doen. Immers, elk bestand dat uw site nodig heeft om er aantrekkelijk uit te zien, zorgt ervoor dat de site wat langzamer laadt.
Dus de manier waarop het werkt, is als volgt: u bezoekt de volgende link en downloadt de app voor mac. Sorry Windows-gebruikers, het is alleen Mac, dus deze versie van de tutorial werkt alleen voor Mac-gebruikers. Zodra u de app hebt gedownload, moet u uw sitestructuur instellen (die ik hieronder zal behandelen).
We zullen in deze tutorial veel inhoud behandelen. Ik geloof in zo efficiënt mogelijk werken met de beste tools die beschikbaar zijn. Om deze reden zullen we in dienst zijn WordPress en plan om met dit project te werken. Ga door voordat je doorgaat naar de volgende stap en download het Blueprint Framework.
Het enige bestand dat we gaan gebruiken is screen.css omdat het alle belangrijke bestanden die deel uitmaken van het framework combineert tot één bestand. Ga je gang en vind dat en trek het naar je bureaublad. Om kort te zijn, gaat deze tutorial ervan uit dat u bekend bent met het instellen van WordPress en de basisprincipes van Blueprint. Als je hier meer informatie over wilt hebben, laat me dan een paar opmerkingen achter en ik zal antwoorden of een bericht schrijven. Er is ook een informatieve tut over Nettuts over Blueprint
Raadpleeg de onderstaande schermafbeelding om uw bestandsstructuur in te stellen. Dit is hoe uw directorystructuur eruit zou moeten zien, minus de CSS-bestanden in de map met stijlbladen. Deze worden automatisch gegenereerd wanneer u een bestand opslaat.
De belangrijke dingen om te nemen van deze screenshot zijn dat we een styles.css map hebben in de themamap in WordPress die wat bedrog doet. Dit bestand haalt via de @import-richtlijn enkele andere bestanden uit een submap binnen. De reden hiervoor is dat WordPress de opmerkingen in gebruikt styles.css om een thema te identificeren. Als je dat niet opgeeft, heb je de neiging om dingen behoorlijk slecht te maken. Door bestanden op te nemen in de styles.css bestand via een samengestelde aard maken we in feite gebruik van alle dynamische kenmerken van Less CSS terwijl we er zeker van zijn dat ons thema correct werkt in WordPress. We verkleinen ook onze CSS om de laadtijd van de site te versnellen. Bovendien worden alle opmerkingen en witruimte verwijderd.
Er zijn een paar instellingen die ik graag controleer. Dat wil je waarschijnlijk ook doen. Hieronder is een screenshot hiervan.
Plaats vervolgens de screen.css bestand in een submap genaamd stylesheets samen met een main.css-bestand. Hernoem dan beide van deze bestanden om een .less extensie te hebben in plaats van .css. Zodra je dat hebt gedaan, ga je gang en start je de app Minder op je Mac en sleep je de themamap naar de App. Dit zorgt er in feite voor dat de Less-app van uw project op de hoogte is. Telkens wanneer u uw minder bestanden opslaat, worden ze automatisch gecompileerd in CSS. Behoorlijk handig? Als dit om een of andere reden niet gebeurt, kunt u op het compilertabblad klikken en alles compileren.
Ok, dus nu dit allemaal is opgezet, wat doet Less dan echt voor mij? Ik ben blij dat je de jonge Padawan vroeg. Ik zal het je laten zien!
Stel dat u een paar primaire kleuren op uw website hebt staan. In plaats van de hex- of RGBA-waarden elke keer dat u een kleur wilt gebruiken, kunt u eenvoudig een variabele gebruiken om uw kleur op te slaan en vervolgens de naam van de variabele gebruiken om de kleur te identificeren die u wilt gebruiken. Als u bijvoorbeeld lichtgrijs wilt opslaan, kunt u een variabele als volgt declareren:
@lightGray = #ddd; / * - en gebruik het dan als volgt in je CSS: - * / div # box1 background: @lightGray;
Nu, wanneer je je kleur wilt veranderen, hoef je alleen maar de waarde van @lightGray te veranderen en dit alles uit te breiden naar de rest van je css-bestand.
De volgende handige truc die ik wil bespreken is erfenis. Voor de CSS-nieuwkomers die er zijn, betekent overerving gewoon dat een klasse eigenschappen van een vorige klasse (ouderklasse) kan erven of ophalen. Dit wordt gedaan door een minder construct bekend als Mixins. Deze bevatten vrijwel alle eigenschappen van een klasse in een andere klasse. Een van de toffe dingen aan Mixins is dat elke eigenschap die u opgeeft in uw onderliggende klasse hetzelfde gedrag overschrijft dat wordt overgenomen van de bovenliggende klasse. In gewoon Engels betekent dit dat ik een klas heb die mijn knoppen op mijn pagina vormt met behulp van enkele handige css3-hellingen. Hoewel ik de opvulling, lettergrootte en andere kenmerken op de knop leuk vind, wil ik misschien dat mijn kleuren veranderen. Ik zou het volgende doen:
/ * - Knop die ik gebruik als de basis- / bovenliggende knop - * / .myBlueButton display: block; opvulling: 4px 12px; achtergrond: rgb (30,87,153); / * Oude browsers * / achtergrond: -moz-lineaire gradiënt (boven, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232, 1) 100%); / * FF3.6 + * / achtergrond: -webkit-gradiënt (lineair, linker boven, links onder, kleur-stop (0%, rgba (30,87,153,1)), kleurstop (50%, rgba (41,137,216 , 1)), kleur-stop (51%, rgba (32,124,202,1)), kleur-stop (100%, rgba (125,185,232,1))); / * Chrome, Safari4 + * / achtergrond: -webkit-lineaire gradiënt (boven, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232 1) 100%); / * Chrome10 +, Safari5.1 + * / achtergrond: -o-lineaire gradiënt (boven, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232,1) 100%); / * Opera11.10 + * / achtergrond: -ms-lineaire gradiënt (boven, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba ( 125.185.232,1) 100%); / * IE10 + * / achtergrond: lineaire gradiënt (boven, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232,1) 100% ); / * W3C * / / * - Knop die ik gebruik als de onderliggende / overerfknop - * / .myGreenButton .myBlueButton; achtergrond: rgb (157,213,58); / * Oude browsers * / achtergrond: -moz-lineaire gradiënt (boven, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51%, rgba (124, 188, 10, 1) 100%); / * FF3.6 + * / achtergrond: -webkit-gradiënt (lineair, linker boven, links onder, kleur-stop (0%, rgba (157,213,58,1)), kleurstop (50%, rgba (161,213 79,1)), kleur-stop (51%, rgba (128, 194, 31,1)), kleur-stop (100%, rgba (124, 188, 10, 1))); / * Chrome, Safari4 + * / achtergrond: -webkit-lineaire gradiënt (boven, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51% , rgba (124, 188, 10,1) 100%); / * Chrome10 +, Safari5.1 + * / achtergrond: -o-lineaire gradiënt (boven, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1 ) 51%, rgba (124,188,10,1) 100%); / * Opera11.10 + * / achtergrond: -ms-lineaire gradiënt (boven, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51 %, rgba (124,188,10,1) 100%); / * IE10 + * / achtergrond: lineaire gradiënt (boven, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51%, rgba (124,188, 10,1) 100%); / * W3C * /
Er is een waarschuwing in gedachten. Als u de css3-gradiëntgenerator gebruikt, lijkt Less de regel die begint met filter niet leuk te vinden. Zoals je ziet, grijpt de onderliggende knop alle gedrag van de bovenliggende knop door de kenmerken van de blauwe knop op de gemarkeerde lijn op te nemen.
myBlueButton;
.
Vervolgens wordt de kleur overschreven door zijn eigen achtergrondkleuren op te geven. Het volgende en laatste item dat we zullen behandelen is het gebruik van een parametrische mix (een mix die parameters opneemt) met Less. Dit is handig in gevallen waarin u browser-specifieke prefixen en dergelijke gebruikt.
.borderRadius (@border_radius) -moz-border-radius: @border_radius; -webkit-radius: @border_radius; -grenzen-straal: @border_radius;
Natuurlijk zijn er veel meer gedragingen en effecten die u kunt implementeren. Je kunt de link aan de bovenkant van de tut volgen naar de Less-site en studeren naar hartenlust. Er is ook een korte tipvideo over Nettuts die spreekt over de Less.js-bibliotheek.
Dat is de basis voor het instellen van een project voor gebruik in WordPress met Less en BluePrint. Ik hoop dat wat je hier vandaag hebt geleerd nuttig zal blijken te zijn in toekomstige projecten. Als je nog vragen hebt, reageer dan alsjeblieft in de reacties.
Accentsconagua