Unul dintre lucrurile care CSS Nu are în mod implicit utilizarea structurilor în stil de programare în care putem reutiliza codul într-un mod logic, cel mai mult pe care îl putem realiza în mod standard este să creăm clase și să grupăm în cadrul etichetelor ceea ce dorim să fim afectați de aceste schimbari.
Această abordare înseamnă că la sfârșitul zilei ajungem cu foi de stil lungi și, deși rezultatul respectiv nu va varia în funcție de Less.js, dacă se schimbă modul în care ajungem la spus, acest lucru se datorează Mixins și moștenire, unde putem declara și utiliza unele componente, pentru a evita să dezvoltăm manual structurile.
Cerințe1- Pentru a realiza acest tutorial, vom solicita unele lucruri în prealabil, trebuie să avem un folder în care să ne putem stoca fișierele .Mai puțin Da .css, trebuie să avem permisiuni pentru a putea face modificări, dacă este necesar.
2- Trebuie să avem o instalare funcțională de Less.js, precum și toate premisele sale, așa cum sunt acestea Node.js Da npm, astfel încât să putem compila foile de stil generate.
3- În cele din urmă, vom avea nevoie și de un editor de text pentru a putea crea codul, pe care îl putem folosi Text sublim o NotePad ++, deși blocul de note clasic va funcționa și pentru noi, totul depinde dacă dorim ajutor cu codul sau funcționalități avansate.
Setați proprietățile CSS cu un MixinUnul dintre primele lucruri despre care ar trebui să știm Mixins, este că sunt metode care ne ajută să stabilim proprietățile CSS pentru proiectul nostru, într-un mod care să ne ajute să refolosim codul și să obținem stiluri mai consistente. Particularitatea unui Mixin este că atunci când compilăm codul nostru Mai puțin Acest lucru nu este luat în considerare, în sensul că o foaie de stil Mixins nu este generată, acest lucru se realizează prin includerea parantezelor la definirea lor, odată ce avem un Mixin trebuie să importăm fișierul său sursă și în acest fel pur și simplu valorile sale sunt transferat în foaia noastră principală pe care o vom include pe pagina noastră.
Crearea primului nostru Mixin
Să creăm un Mixin care ne permite să stabilim proprietatea CSS pentru a rotunji marginile unui element din HTML, pentru aceasta trebuie să urmăm următorii pași:
1- Vom crea în folderul nostru de proiect un fișier numit mixins.less, iar în interior vom plasa următorul conținut:
.rounded-margini () {border-radius: 7px; }2- Acum vom crea un fișier numit proiect.mai puțin, aici vom stabili modul în care vor fi aplicate diferitele stiluri ale paginii noastre HTML, astfel încât să ne obișnuim să lucrăm cu Mai puțin vom crea mai multe reguli CSS astfel încât să putem vedea cum MixinsSă vedem codul pe care trebuie să-l punem în acest fișier.
@import "mixins.less"; @ header-background-color: albastru; @ content-background-color: verde; @ footer-background-color: roșu; header {. margini rotunjite (); background-color: @ header-background-color; culoare: contrast (@ header-background-color); } p {.rounded-margini (); fundal-culoare: @ content-background-color; culoare: contrast (@ content-background-color); } footer {. rounded-margini (); fundal-culoare: @ footer-background-color; culoare: contrast (@ footer-background-color); }După cum putem vedea, începem prin importarea fișierului pe care l-am generat în pasul anterior, apoi stabilim 3 variabile cărora le dăm o culoare ca valoare, în cele din urmă începem să creăm clasele pentru elemente HTML, primul lucru pe care îl facem este să ne numim funcția Marginile rotunjite (), și apoi atribuim culorile elementelor cu variabilele.
3- În acest pas vom crea fișierul HTML, pe care îl putem numi orice vrem, atâta timp cât are o structură ca următoarea:
Mixins cu Less La cabeceraDupă cum putem vedea, am făcut pur și simplu includerea fișierului nostru .Mai puțin ca fișierul .js care conține instrumentul, am optat pentru această opțiune, astfel încât să nu trebuie să compilăm, totuși trebuie să ne amintim că acest lucru nu ar trebui aplicat în producție. În corpul HTML Generăm diferitele elemente pe care le definisem în CSS pentru a vedea aplicarea stilurilor.Continutul
Subsol
4- În cele din urmă, dacă dorim să vedem rezultatul, deschideți documentul într-un browser de genul Firefox și astfel putem vedea cum arată totul, să vedem în imaginea următoare ce am obținut:
Dacă mergem un pic mai departe și vedem codul sursă pe care browserul îl interpretează, vom vedea cum variabilele variabile și Mixin aplicat, a fost de fapt înlocuit cu cod CSS, ceea ce înseamnă că, chiar dacă am scris proprietatea o singură dată Mai puțin îl plasează acolo unde corespunde meciul, să vedem:
Patrimoniul în stilurile noastre
Lucrul cu moștenirile este ceva care ne ajută și este motivul pentru care putem crea elemente superioare care transmit unele proprietăți elementelor lor inferioare sau conținute, adică există caracteristici comune pe care nu va trebui să le repetăm în elementele pe care le dorim să le aibă.
Ca întotdeauna, obiectivul de a nu repeta codul este să ne economisim muncă și timp, precum și să reducem erorile și să sporim menținerea codului nostru datorită coerenței și centralizării resurselor sale.
Una dintre cele mai simple, dar eficiente modalități de a lucra moștenirea este cu elemente imbricate, să presupunem că avem o secțiune HTML iar în interior vom avea mai multe elemente, dacă vom folosi CSS Clasic pentru a spune că toate elementele acelei secțiuni au unele proprietăți, dar acestea sunt diferite, ar fi necesar să facem cel puțin o linie pentru fiecare stil, să vedem la ce ne referim:
section element1 {content1: xx; } secțiunea element2 {content2: zz; }După cum putem vedea, creăm mai mult cod decât ar trebui, în schimb dacă folosim moștenire și cuibărire în Mai puțin am putea realiza ceva de genul:
secțiunea {element1 {content1: xx; } item2 {content2: zz; }}După cum putem vedea, nu numai că scriem mai puțin, dar și reprezentarea a ceea ce dorim să realizăm este mult mai logică, ceea ce ne ajută să înțelegem și să separăm corect elementele pe care le vom folosi în stilurile noastre.
Crearea stiluri imbricate
Acum vom aplica ceea ce tocmai am explicat în punctul anterior, trebuie să creăm un fișier .Mai puțin unde realizăm un stil care este cuibărit, pentru a salva munca și a-l face mai logic. Pentru a realiza această sarcină trebuie să urmăm pașii următori:
1- Să creăm un fișier.Mai puțin ce putem numi moștenire.după, aici vom crea stilurile imbricate, pentru a înțelege acest lucru vom vedea pur și simplu codul pe care urmează să îl plasăm și astfel conceptul va veni la noi într-un mod mai bun.
secțiunea {h1 {font-size: 4em;} p {padding: 0 5px;}}Vedem că am creat un stil pentru element secțiune, și că totul h1 sau p în cadrul acelui element container trebuie să funcționeze cu regulile stabilite pe care le-am imbricat.
2- Acum trebuie să ne creăm fișierul HTML care va semăna mult cu exercițiul anterior, ce modificări sunt numele fișierelor de inclus și structura din corp, dar dacă o vedem într-un mod abstract vorbim despre același lucru, să ne uităm la cod.
Moștenirea în mai puținDupă cum vedem, pur și simplu prin includerea fișierului nostru Mai puțin este că vom genera stilurile necesare, dacă vedem cum arată în browser vom obține ceva de genul următor:Conținutul nostru
Cu toate acestea, dacă observăm ce se întâmplă cu CSS Când este interpretat sau compilat, vom vedea că forma imbricată pe care am construit-o nu este respectată, dar din moment ce compilatorul realizează direct această formă neimbricată, nu trebuie să ne facem griji că este așa, să vedem care este codul pe care îl vede browserul nostru arată:
Cu aceasta putem finaliza acest tutorial, așa cum am văzut Mai puțin nu este doar scris CSS într-un mod diferit, este de a face utile aceste diferențe, ceea ce ne conduce la economisirea timpului, la simplificarea aplicațiilor pentru echipa noastră de dezvoltare și la economisirea eforturilor gândind mai logic și refolosind componentele. Modul în care toate acestea au cel mai mult sens pentru noi este că continuăm să exersăm și să aplicăm aceste exemple în cazuri practice și reale, astfel încât să ne putem obișnui cu acest mod de lucru.
V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv
