Share
În acest tutorial, vă voi purta printr-un instrument numit Mit. Mitul este un preprocesor CSS alternativ care, spre deosebire de Sass sau LESS, nu utilizează sintaxa proprietară. În schimb, Mitul adoptă sintaxa CSS "viitoare" așa cum este specificată în Proiectul de lucru. Gândiți-vă la mit, precum imaginea care ne permite să folosim HTML5
"CSS așa a fost imaginat.
Înainte de a putea folosi Mitul trebuie mai întâi să stabilim câteva lucruri. Să începem!
Mitul este un pachet Node.js care îi permite să lucreze pe diferite platforme. Prin urmare, va trebui să vă asigurați că aveți Node.js și NPM (Node Package Manager) instalate în sistemul dvs. Pentru a verifica, lansați Terminal sau Command Prompt și tastați nod -v && npm -v, după cum urmează:
Aceasta indică faptul că avem Node.js și NPM instalate.Această comandă ar trebui să returneze versiunea Node.js și NPM după cum se arată mai sus, altfel va trebui să le instalați înainte de a continua. NPM a oferit un scurt screencast pentru a vă ghida în proces. Puteți, de asemenea, să urmăriți seria anterioară și cursurile noastre pentru a sapa în ceea ce privește Node.js.
Acum, presupunând că ați instalat Node.js și NPM, puteți începe instalarea Mitului utilizând următoarea comandă:
npm instalează -g mit
-g parametrul pe care l-am adăugat va instala biblioteca Myth la nivel global, care permite Mitului să fie accesibil oriunde, în orice director din sistemul nostru.
După ce ați terminat, veți avea acces la mit comanda. Alergare mit --versiune, de exemplu, vă va arăta versiunea curentă a Myth instalată pe sistemul dvs..
Accentsconagua
mit comandă.Mitul funcționează cu orice extensie de fișier bazată pe text. Stilurile pot fi setate în .txt, .css, sau chiar .mit. Aici folosesc pur și simplu .css așa că nu va trebui să configurez editorul meu de coduri pentru a face codul cu sintaxa potrivită pentru evidențierea culorilor.
Rulați următoarea comandă, mit - watch build / app.css app.css pentru a monitoriza modificările din foaia de stil din /construi și compilați-l într-un fișier corespunzător.
Foaia de stil va fi compilată în aplicația app.css din directorul rădăcină.Suntem pregătiți să folosim Mitul!
Mitul este în esență un preprocesor CSS care ne permite să scriem o nouă sintaxă CSS (pe care s-ar putea aștepta să o standardizăm în viitor) compilându-l în format CSS compatibil cu browserul de azi. Suportul de mituri include utilizarea variabilelor CSS, manipularea culorilor CSS și câteva tehnici CSS care, în prezent, sunt parțial sau nu sunt suportate uniform, cum ar fi :: substituent pseudo-clasă și calc ().
Utilizarea variabilelor ne ajută în mod semnificativ să menținem foile de stil și este, probabil, principalul motiv pentru care preprocesoarele CSS au devenit atât de bine adoptate în primul rând. Cu toate acestea, variabilele vor veni în CSS ca o caracteristică nativă. În conformitate cu cel mai recent proiect de lucru, vom folosi o dublă liniuță -- pentru a defini o variabilă în loc de var- prefixul menționat într-un proiect anterior:
: rădăcină / ** [versiune anterioară și depreciată] * / var-color-primary: # 000; var-color-secundar: #fff; / ** [ultima versiune] * / --color-primary: # 000; --color-secundar: #fff;
:rădăcină selectorul de pseudo-clasă se referă la elementul rădăcină al documentului de marcare. În cazul HTML, aceasta se va referi la element, în SVG ar fi . Deoarece elementul rădăcină este cel mai înalt nivel al unui document, punând variabilele noastre în :rădăcină le permite să fie accesibile în orice reguli de stil din foaia de stil. Puteți limita domeniul de aplicare al variabilei declarând într-un selector mai specific.
Noi folosim noul var () funcția de a aplica o variabilă într-o regulă de stil, de exemplu:
: rădăcină --color-primary: # 000; --color-secundar: #fff; h1, h2, h3 culoarea: var (- color-secundar); .panel fundal-culoare: var (- color-primar); Culoare: var (- color-secundar);
Acest exemplu ne va da următoarea ieșire (după cum s-ar fi așteptat):
h1, h2, h3 culoare: #fff; .panel fundal-culoare: # 000; culoare: #fff;
Valorile în variabile pot fi orice - o culoare, un șir, o lungime, chiar o operație matematică folosind CSS calc () funcţie. Valorile din variabilă pot fi reutilizate sau moștenite în conformitate cu regula de cascadă CSS. Mai jos, de exemplu, determinăm inaltimea liniei valoare bazată pe variabila precedentă.
: rădăcină --font-size-base: 16px; - linia-înălțime-bază: calc (16px + 10); p font-size: var (- font-size-base); înălțimea liniei: var (- linia-înălțimea-bază);
Acest lucru ne oferă:
p font-size: 16px; line-height: 26px;
Un browser care suportă nativ variabila CSS este în prezent Firefox (găsiți lista completă pe CanIUse.com).
Funcția de manipulare a culorilor ne oferă posibilitatea de a schimba culorile mai intuitiv; nu este nevoie să memorați sau să jonglezi selectorul de culori doar pentru a alege culoarea potrivită. Aceasta este o practică obișnuită cu preprocesoarele CSS, dar culoare() (parte din CSS Color Mod Level 4) ne va permite să modificăm culorile în CSS simplu. Această funcție nouă funcționează prin specificarea culorii împreună cu așa-numitul culoare de reglare:
element fundal-culoare: culoare ();
Setările de culoare care suportă mitul includ:
luminozitate (), pentru a modifica luminozitatea culorii date.albeață (), pentru a modifica intensitatea albă a culorii date.negreală (), similar cu albeață (), cu excepția modificării intensității negre.saturare(), pentru a modifica saturația culorilortentă() , pentru a produce o culoare mai deschisă prin amestecarea culorii date cu culoarea albă.umbră() , pentru a produce o culoare mai închisă prin amestecarea culorii date cu negru.Exemplul de mai jos va fi mai ușor #ccc (gri închis) cu 20%.
p culoare: culoare (#ccc luminozitate (20%));
... care se compilează în:
p culoare: rgb (51, 51, 51);
Alternativ, puteți trece și culoarea printr-o variabilă, cum ar fi aceasta, care ne va da aceeași ieșire:
: rădăcină --color-primary: #ccc; p culoare: culoare (var (- color-primar) ușoară (20%));
culoare() este o funcție care va fi foarte util atunci când este utilizată împreună cu CSS3 liniar gradient pentru a determina culori gradient, de exemplu:
.butonul fundal: gradient liniar (spre partea de jos, var (- color-primar), culoarea (var (- color-primar) umbră (10%)); ;
font-variant proprietatea este altceva pe care îl putem folosi în Mit. font-variant a fost de fapt prezentă în CSS de la CSS1, cu doar două valori acceptate, normal și litere mici. În CSS3, parte din modulul CSS Fonts, font-variant proprietatea a fost extinsă cu mai multe valori acceptate, precum și adăugiri specifice de proprietate, cum ar fi font-variant-est-asiatice care ne va permite să selectăm variații ale glifurilor chinezești, simplificată sau tradiţional.
Să încercăm să transformăm toate literele dintr-o rubrică în mici capitale:
h1 font-variant: toate-mici-capace;
Mitul va compila acest cod în:
p -webkit-font-caracteristică-setări: "smcp", "c2sc"; -moz-font-feature-settings: "smcp", "c2sc"; font-feature-settings: "smcp", "c2sc"; font-varianta: capace mici;
toate-mici-capace valoarea va forța toate caracterele, inclusiv literele mici și majuscule, în litere mici. Cu toate acestea, rețineți că toate-mici-capace vor afecta numai familii de fonturi care oferă versiuni de capital mic ale fiecărui glif, cum ar fi Helvetica, Arial și Lucida Grande. În cazul în care capacele mici nu sunt acceptate, simbolul va reveni "necunoscut":
Imagine de curtoazie: Typography.comFirefox este, în prezent, singurul browser cu sprijin decent pentru font-variant proprietate. Multe dintre valori, cu excepția litere mici (prezent de la CSS1) va eșua în alte browsere, inclusiv Chrome și Safari. (consultați lista completă de compatibilitate în CanIUse.com).
Mitul include, de asemenea, Autoprefixer care îi permite să introducă prefixe de browser pentru anumite proprietăți. Treceți la Gothub repo pentru a găsi mai multe funcții CSS pe care le suportă. Există, de asemenea, un plugin pentru Grunt și Gulp pentru a vă satisface fluxul de lucru.
În sfârșit, Mitul este un preprocesor CSS pentru oricine trăiește pe marginea sângerării web. Dar, indiferent dacă decideți să utilizați mitul ca un instrument CSS obișnuit sau nu, putem concluziona că acesta demonstrează câteva noi caracteristici CSS interesante, care vor face ca site-ul web să fie mult mai bine în viitor.
