Share
Până în prezent, am scris șapte biblioteci Sass. Cele mai multe dintre ele sunt doar o superset de funcții care pot fi incluse apoi utilizate în proiectele dvs. pentru a vă oferi mai multă putere asupra codului.
De exemplu, SassyLists este o colecție de funcții pentru manipularea listelor Sass. Ele vă ajută să inversați o listă, să inserați un element la un anumit index, să faceți o listă între două indexuri și așa mai departe.
SassyLists poate fi importat ca extensie Compass, dar am observat că uneori dezvoltatorii doresc doar să folosească o funcție foarte specifică din SassyLists, astfel încât să o copieze sau să o insereze în baza de coduri. Problema este că ei nu acordă întotdeauna atenție dependențelor (de exemplu, alte funcții).
Am decis să încep să lucrez la un controlor de dependență. Ideea este foarte simplă: fiecare funcție cu dependențe va rula mai întâi prin verificatorul dependenței; dacă acesta din urmă constată că lipsesc anumite funcții, acesta avertizează dezvoltatorul că funcția nu va putea funcționa corect.
Controlul dependenței este o funcție simplă acceptând un număr nelimitat de argumente (numele funcțiilor necesare).
Funcții de funcționare lipsă (funcții $ ...) // Verificați dependențele
Cu aceasta folosim Funcția-există () , introdusă în Sass 3.3, care verifică existența unei funcții date în domeniul global.
Notă: Sass 3.3 oferă de asemenea mixin-există (), variabilă există () și globală variabilă există ().
Funcții de funcționare lipsă funcționale (funcții $ ...) @ funcție $ în $ în funcții $ if not function-exists ($ function) @return true; @return false;
Dacă dintr-un anumit motiv o funcție nu există în domeniu, atunci lipsă-dependențe se intoarce Adevărat. Dacă toate funcțiile sunt în regulă, atunci nu există dependințe care lipsesc, așa că se întoarcefals.
Prin urmare, veți folosi acest lucru:
// @ solicită funcția my // funcția @ solicită funcția dummy () @ dacă lipsesc dependentele (my-function, my-other-function) @warn "Oops! „"!; @return null; // funcția "dummy", // necesitând în mod evident funcția "my-function" și "my-other-function" pentru a funcționa.
Deci este destul de cool.
Ar fi chiar mai bine dacă am putea identifica care funcția lipsește, astfel încât dezvoltatorul știe ce să facă pentru a rezolva problema. De asemenea, trebuie să introduceți avertismentul de fiecare dată când este un fel de enervant, astfel încât să putem muta acest lucru la lipsă-dependențe funcţie.
Ideea nu este atât de diferită de ceea ce am făcut anterior. Diferența este că acum vom stoca numele funcțiilor lipsă, mai degrabă decât returnarea directă. Apoi, dacă există funcții care lipsesc, vom arunca un avertisment dezvoltatorului și, în cele din urmă, vom întoarce un boolean așa cum am făcut mai devreme.
Funcțiile de funcționare lipsă funcționează ($ funcții ...) $ missing-dependencies: (); Funcția $ = $ în funcțiile $ if not function-exists (funcția $)) $ missing-dependencies: append ($ missing-dependencies, $ function, comma); @ la lungime (dependentele lipsă $)> 0 @warn "Dependencies not met! Sunt necesare următoarele funcții: # $ missing-dependencies."; lungime retur ($ missing-dependencies)! = 0;
După cum puteți vedea, nu este mult mai complex decât versiunea anterioară. În plus, modul de utilizare este chiar mai simplu:
Funcționarea @funcțională () @în cazul dependențelor lipsă (funcția mea, funcția mea-altele) @return null; // funcția "dummy", // necesitând în mod evident funcția "my-function" și "my-other-function" pentru a funcționa.
Vedea? Putem șantaja @a avertiza directive, dar dacă lipsește una sau mai multe funcții, dezvoltatorul va fi îndemnat cu:
Nevoi dependente! Sunt necesare următoarele funcții: funcția mea, funcția mea-altele.
Problema majoră pe care o pot vedea cu această caracteristică este că aveți nevoie de ea lipsă-dependențe funcţie! În acest moment, verificatorul dependenței este în esență o dependență ... Vedeți ironia.
Asta pentru ca lipsă-dependențe (...) este tratat ca un șir în situațiile în care lipsă-dependențe nu se referă la nici o funcție și un șir întotdeauna evaluează Adevărat. Atunci când faci @ dacă lipsesc dependențele (...), faci efectiv @if șir, care este întotdeauna adevărat, astfel încât veți ajunge întotdeauna la îndeplinirea acestei condiții.
Pentru a evita acest lucru, există o muncă inteligentă în jur. În loc să faci pur și simplu @ dacă lipsesc dependențele (...), am putea face @ dacă dependențele lipsesc (...) == true. În Sass, == este ca === în alte limbi, ceea ce înseamnă că nu numai că verifică valoarea, dar și tipul.
Funcționare dummy () @în cazul dependențelor lipsă (funcția mea, funcția mea-altele) == true @return null; // funcția "dummy", // necesitând în mod evident funcția "my-function" și "my-other-function" pentru a funcționa.
Dacă funcția nu există, atunci după cum am văzut mai devreme, apelul va fi tratat ca un șir. În timp ce o șir evaluează Adevărat, nu este strict egal cu Adevărat, pentru că este a Şir tip, nu a bool tip.
Deci, în acest moment, dacă lipsă-dependențe funcția nu există, nu se va potrivi cu condiția, astfel încât funcția poate funcționa normal (deși crash dacă există o dependență lipsă undeva în cod). Ceea ce este minunat, pentru că noi doar ameliorăm lucrurile fără să le distrugem.
O altă problemă cu această caracteristică este aceea că verifică numai funcțiile care lipsesc, și nu amestecuri sau variabile globale. Acestea fiind spuse, acest lucru este ușor de realizat prin ajustarea codului de verificare a dependenței.
Ce se întâmplă dacă fiecare argument transmis funcției ar putea fi o listă de două elemente, cu tipul de dependență ca prim argument (fie funcţie, mixin sau variabil), iar numele dependenței ca al doilea? De exemplu:
dependențele lipsă (funcția funcția my-funcția, variabila variabilă my-cool-variabilă);
Dacă avem mai multe șanse să folosim funcții ca dependențe, am putea face funcţie implicit, astfel încât apelul anterior să arate astfel:
lipsă-dependențe (funcția mea, variabila variabilă mi-cool-variabilă);
Practic, este ca și cum ați cere să verificați dacă funcția mi-funcția există și variabila mi-rece-variabilă există, deoarece acestea sunt necesare pentru o anumită sarcină. Clar până acum?
Acum să trecem la cod. Putem folosi apel() funcția, pentru a apela TYPE - există (NAME). Totul altceva este la fel ca în trecut.
Accentsconagua
Funcții de funcționare lipsă de funcționare (dependențe $ ...) $ missing-dependencies: (); @ dependența fiecărui $ în dependențele $ type $: "function"; // Tipul de dependență implicit @if lungime (dependență $) == 2 $ type: nth (dependență $, 1); Tipul $: dacă (index ("funcția" "mixin" "variabilă", tipul $), tipul $, "funcția"); $ dependență: n (dependență $, 2); dacă nu apelați ("# $ type -există", dependență $) $ missing-dependencies: append ($ lipsă-dependențe, dependență $, virgulă); @ la lungime (dependentele lipsă $)> 0 @warn "Dependințe nesatisfacute! Sunt necesare următoarele dependențe: # $ missing-dependencies."; @return $ missing-dependencies! = 0; Destul de cool, nu? Acest lucru face ca codul să fie ceva mai complex, deci, dacă nu aveți probabilitatea de a avea diferite tipuri de dependențe (ceea ce nu este cazul meu cu SassyLists), vă sugerez să rămâneți cu prima versiune pe care am văzut-o.
Notă: poate doriți să transformați automat o variabil introduceți în la nivel mondial-variabilă pentru a apela la nivel mondial-variabilă există, deoarece este probabil ca o variabilă necesară să fie una globală.
Asta-i destul de mulți oameni. Evident, aceasta nu este o caracteristică de zi cu zi Sass. Dar cred că în multe cazuri, mai ales când se construiesc biblioteci, cadre și extensii, aceste sfaturi pot fi utile. Dați-mi voie să știu ce credeți în comentariile dvs.!
