Mixins en erfenissen met Less.js

Een van de dingen die CSS Het heeft standaard niet het gebruik van programmeerstijlstructuren waar we de code op een logische manier kunnen hergebruiken, het meeste dat we op een standaardmanier kunnen bereiken, is om klassen te maken en binnen de labels te groeperen wat we willen beïnvloeden door deze veranderingen.

Deze aanpak betekent dat we aan het eind van de dag eindigen met lange stylesheets, en hoewel dat resultaat niet zal variëren met Less.js, als de manier waarop we naar die bladeren gaan verandert, dit dankzij de Mixins en overerving, waar we sommige componenten kunnen declareren en gebruiken, om te voorkomen dat we de structuren handmatig moeten ontwikkelen.

Vereisten1- Om deze tutorial uit te voeren, hebben we vooraf een aantal dingen nodig, we hebben een map nodig waarin we onze bestanden kunnen opslaan .minder Y .css, moeten we er rechten op hebben om indien nodig wijzigingen aan te kunnen brengen.

2- We moeten een functionele installatie hebben van: Less.js, evenals al zijn voorwaarden, zoals ze zijn Node.js Y npm, zodat we onze gegenereerde stylesheets kunnen compileren.

3- Ten slotte hebben we ook een teksteditor nodig om de code te kunnen maken, die we kunnen gebruiken Sublieme tekst o NotePad ++, hoewel het klassieke kladblok ook voor ons zal werken, hangt het er allemaal van af of we hulp willen met de code of geavanceerde functionaliteiten.

Stel CSS-eigenschappen in met een MixinEen van de eerste dingen die we moeten weten: Mixins, is dat het methoden zijn die ons helpen de eigenschappen vast te stellen CSS voor ons project, op een manier om ons te helpen code te hergebruiken en consistentere stijlen te bereiken. De bijzonderheid van een Mixin is dat bij het compileren van onze code Minder Hiermee wordt geen rekening gehouden, in die zin dat er geen Mixins-stylesheet wordt gegenereerd, dit wordt bereikt door haakjes op te nemen bij het definiëren ervan, zodra we een Mixin hebben, moeten we het bronbestand importeren en op deze manier zijn eenvoudig de waarden overgebracht naar ons hoofdblad dat we op onze pagina zullen opnemen.

Onze eerste maken mixen
Laten we een maken mixen waarmee we eigendom kunnen vestigen CSS om de randen van een element in ons af te ronden HTML, hiervoor moeten we de volgende stappen volgen:

1- We gaan in onze projectmap een bestand maken met de naam mixins.less, en binnen zullen we de volgende inhoud plaatsen:

 .afgeronde randen () {grens-radius: 7px; }

2- Nu gaan we een bestand maken met de naam project.less, dit is waar we de manier gaan bepalen waarop de verschillende stijlen van onze pagina zullen worden toegepast HTML, zodat we wennen aan het werken met Minder we gaan verschillende regels maken CSS zodat we kunnen zien hoe de MixinsLaten we eens kijken naar de code die we in dit bestand moeten plaatsen.

 @import "mixins.less"; @ header-achtergrondkleur: blauw; @ inhoud-achtergrondkleur: groen; @ footer-achtergrondkleur: rood; kop {. afgeronde randen (); achtergrondkleur: @ koptekst-achtergrondkleur; kleur: contrast (@ kop-achtergrondkleur); } p {.afgeronde randen (); achtergrondkleur: @ inhoud-achtergrondkleur; kleur: contrast (@ inhoud-achtergrondkleur); } voettekst {. afgeronde randen (); achtergrondkleur: @ footer-achtergrondkleur; kleur: contrast (@ footer-achtergrondkleur); }

Zoals we kunnen zien, beginnen we met het importeren van het bestand dat we in de vorige stap hebben gegenereerd, dan stellen we 3 variabelen vast waaraan we een kleur als waarde geven, tenslotte beginnen we de klassen voor de elementen te maken HTML, het eerste wat we doen is onze functie aanroepen Afgeronde hoeken(), en dan wijzen we de elementkleuren toe met de variabelen.

3- In deze stap gaan we het bestand maken HTML, die we kunnen noemen wat we willen, zolang het een structuur heeft als de volgende:

 Mixins met Less La cabecera
De inhoud
voettekst 

Zoals we kunnen zien, hebben we eenvoudig ons bestand opgenomen .minder als de .js die de tool bevat, hebben we voor deze optie gekozen zodat we niet hoeven te compileren, maar we moeten niet vergeten dat dit niet in productie moet worden toegepast. In het lichaam van de HTML We genereren de verschillende elementen die we in de CSS hadden gedefinieerd om de toepassing van de stijlen te zien.

4- Ten slotte, als we het resultaat willen zien, open dan ons document in een browser zoals Firefox en zodat we kunnen zien hoe alles eruit ziet, laten we in de volgende afbeelding zien wat we hebben:

Als we wat verder gaan en de broncode zien die de browser interpreteert, zullen we zien hoe de verschillende variabelen en de mixen toegepast, werd het eigenlijk vervangen door code CSS, wat betekent dat zelfs als we de eigenschap maar één keer hebben geschreven Minder plaatst het waar de overeenkomst overeenkomt, laten we eens kijken:

Het erfgoed binnen onze stijlen
Werken met erfenissen is iets dat ons helpt en het is om de reden dat we superieure elementen kunnen maken die sommige eigenschappen doorgeven aan hun inferieure of ingesloten elementen, dat wil zeggen dat er gemeenschappelijke kenmerken zijn die we niet hoeven te herhalen in elementen die we willen om ze te hebben.

Zoals altijd is het doel van het niet herhalen van code om ons werk en tijd te besparen, fouten te verminderen en de onderhoudbaarheid van onze code te vergroten dankzij de consistentie en centralisatie van de bronnen.

Een van de meest elementaire maar effectieve manieren om overerving te werken, is met geneste elementen, laten we zeggen dat we een sectie hebben HTML en binnenin zullen we verschillende elementen hebben, als we de . gebruiken CSS Klassiek om te zeggen dat alle elementen van die sectie enkele eigenschappen hebben, maar deze zijn verschillend, het zou nodig zijn om ten minste één regel voor elke stijl te maken, laten we eens kijken wat we bedoelen:

 sectie element1 {content1: xx; } sectie element2 {content2: zz; }

Zoals we kunnen zien, maken we meer code dan we nodig hebben, in plaats daarvan gebruiken we overerving en nesting in Minder we zouden zoiets als het volgende kunnen bereiken:

 sectie {element1 {content1: xx; } item2 {content2: zz; }}

Zoals we kunnen zien, schrijven we niet alleen minder, maar is ook de weergave van wat we willen bereiken veel logischer, wat ons helpt de elementen die we in onze stijlen gaan gebruiken te begrijpen en goed te scheiden.

Creëren geneste stijlen
Nu gaan we toepassen wat we zojuist in het vorige punt hebben uitgelegd, we moeten een bestand maken .minder waar we een stijl maken die genest is, om werk te besparen en het logischer te maken. Om deze taak te bereiken, moeten we de volgende stappen volgen:

1- Laten we een bestand maken.minder hoe kunnen we heten erfenis.less, dit is waar we de geneste stijlen zullen maken, om dit te begrijpen, zullen we eenvoudig de code zien die we gaan plaatsen en dus zal het concept op een betere manier naar ons toe komen.

 sectie {h1 {lettergrootte: 4em;} p {padding: 0 5px;}}

We zien dat we een stijl voor het element hebben gemaakt sectie, en dat alles h1 of P binnen dat containerelement moet het werken met de vastgestelde regels die we hebben genest.

2- Nu moeten we ons bestand maken HTML die veel op de vorige oefening gaat lijken, welke veranderingen zijn de namen van de bestanden die moeten worden opgenomen en de structuur binnen de lichaam, maar als we het op een abstracte manier zien, hebben we het over hetzelfde, laten we naar de code kijken.

 Overerving in Less
Onze inhoud

Zoals we zien door simpelweg ons bestand op te nemen Minder is dat we de nodige stijlen gaan genereren, als we zien hoe het eruit ziet in de browser, krijgen we zoiets als het volgende:

Als we echter opmerken wat er gebeurt met de CSS Wanneer het wordt geïnterpreteerd of gecompileerd, zullen we zien dat de geneste vorm die we hebben gebouwd niet wordt gerespecteerd, maar aangezien de compiler deze niet-geneste vorm rechtstreeks maakt, hoeven we ons geen zorgen te maken dat het op deze manier is, laten we eens kijken wat de code die onze browser ziet, ziet er als volgt uit:

Hiermee kunnen we deze tutorial afmaken, zoals we zagen Minder het is niet alleen schrijven CSS op een andere manier, is om die verschillen nuttig te maken, wat ons ertoe brengt tijd te besparen, applicaties vriendelijker te maken voor ons ontwikkelingsteam en inspanningen te besparen door logischer te denken en componenten te hergebruiken. De manier waarop dit alles voor ons het meest logisch is, is dat we deze voorbeelden blijven oefenen en toepassen in praktische en reële gevallen, zodat we aan deze manier van werken kunnen wennen.

Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven