Share
Lumea dezvoltării de web-uri frontale a sporit în mod constant aportul pe care îl numim "Preprocesoarele CSS", care extind funcționalitatea CSS-ului regulat. Probabil cele două cele mai cunoscute, cu cea mai mare bază de utilizatori, sunt LESS și Sass / SCSS. Cu toate acestea, există un al treilea preprocesor care nu a primit prea multă atenție, și asta e Stylus.
Astăzi vom discuta de ce Stylus este minunat, de ce o aleg și de ce ar putea deveni noul dvs. erou CSS.
Înainte de a intra în specificul modului în care Stylus funcționează, voi începe cu propria mea abordare a punctelor forte ale LESS și SASS / SCSS și de ce nu aleg nici măcar că ambele rock.
Fiecare dintre cele trei preprocesoare include utilizarea variabilelor, amestecurilor, cuiburilor și extensiilor, împreună cu diferite grade de operații și funcții logice. Deci, toate cele trei sunt aceleași, prin faptul că vă permit să abstracționați elementele cheie de design, să utilizați logica și să scrieți mai puțin cod, ceea ce le face pe toți capabili să vă dea câștiguri mari peste CSS brut atunci când este bine folosit.
Cu toate acestea, cu toate cele trei fiind aceleași în acest sens de bază, este modul în care acestea sunt diferite, care va duce în cele din urmă la alegerea dvs. pe care să utilizați.
Pentru mine, cea mai mare putere în afara aspectelor comune celor trei preprocesoare este comunitatea în jurul LET și ofertele create de ei.
Cel mai cunoscut proiect care încorporează LESS este framework-ul Twitter Bootstrap, iar presupunerea mea este că dorința de a lucra cu acesta este o mare parte a ceea ce conduce mulți oameni la rândul lor la LESS.
Un alt punct de vedere este biblioteca LESShat mixin, care oferă o gamă excelentă de amestecuri pentru efecte CSS3 și mai mult, iar partenerul său este plugin-ul CSShat pentru Photoshop, care generează copierea și lipirea codului LESS din elementele PSD. În special, aceste două elemente în tandem creează un flux de lucru foarte puternic, care este fantastic dacă faceți o mulțime de procese de proiectare în Photoshop.
Și un plus mai mare pentru LESS este faptul că majoritatea oamenilor consideră că este destul de accesibil pentru utilizare. Aveți posibilitatea să utilizați un fișier JavaScript simplu pentru a îl compila în zbor, puteți utiliza un IDE cu o compilare încorporată, cum ar fi CrunchApp (sau numai CodeKit pe Mac), sau puteți utiliza Node.js pe mașina dvs. locală pentru o operație mai robustă / soluție flexibilă de compilare.
Prefer mereu propriul meu cod peste cadrele terților și, de asemenea, am tendința de a face design minimal în Photoshop în aceste zile, preferând să proiectez dinamic în browser cât mai mult posibil. (CSSHat poate iesi in mai multe limbi prea). Deci, pentru mine, la fel de mare ca și proiectele pe care le-am descris, ele singure nu sunt suficiente pentru a mă obliga să aleg mai puțin ca preprocesorul meu.
Dar cel mai important motiv pentru care nu folosesc mai puțin este, de fapt, lipsa semnificativă a caracteristicilor de procesare a logicii disponibile între acesta și celelalte două preprocesoare majore.
Din păcate, cu cât mai puține caracteristici bazate pe logică sunt disponibile pentru utilizare, cu atât mai puțin putem crea un cod minim și curat, iar dezvoltarea mai lentă și modificarea ulterioară vor fi.
Mai puțin permite o anumită logică, dar este într-adevăr destul de limitator în comparație cu Stylus și Sass / SCSS. Veți vedea de ce în descrierea mea despre ce este minunat despre Sass.
Sass are, de asemenea, o comunitate minunată cu multe proiecte excelente disponibile pentru utilizare. În cazul în care LESS are Twitter Bootstrap, Sass are cadre ca Gumby și Foundation. Unde mai puțin, Sass are biblioteci mixin precum Compass și Bourbon.
Cu toate acestea, în cazul în care într-adevăr vine în propria sa comparativ cu mai puțin este capacitatea sa puternică de a se ocupa de logica. În cazul în care LESS este ceea ce ați putea numi CSS îmbunătățit, Sass se comportă mult mai mult ca un limbaj de programare complet.
De exemplu, Sass vă permite să creați în mod eficient verificări condiționale scrise, care este deosebit de util în cadrul mixurilor.
În Sass puteți face următoarele:
@mixin border_and_bg ($ border_on, $ border_color, $ bg_on, $ bg_color) @ dacă $ border_on == true border: 1px solid $ border_color; @else border: 0; @if $ bg_on == true background-color: $ bg_color; @else background-color: transparent;
Acest mixin verifică dacă $ border_on este setat sa Adevărat, și dacă este așa, utilizează $ border_color valoare în ieșire pentru frontieră proprietate. Dacă nu, se întoarce la setarea frontieră proprietate la 0.
Apoi, de asemenea, verifică pentru a vedea dacă $ bg_on este setat sa Adevărat, și dacă este așa, utilizează $ bg_color valoare în ieșire pentru culoare de fundal proprietate. Dacă nu, setează culoare de fundal proprietate la transparent
Acest lucru înseamnă că, în funcție de valorile trecute, pot fi generate până la patru tipuri diferite de ieșiri dintr-un singur mixin, adică graniță și fundal atât pe frontieră, cât și pe fundal atât pe fundal, cât și pe fundal,.
Cu toate acestea, în LESS nu există verificări "dacă / alt", deci cele de mai sus nu ar fi posibile. Cele mai multe lucruri pe care le puteți face cu LESS sunt folosirea a ceea ce se numește "Mixed Guarded", în cazul în care un amestec dat este difuzat în mod diferit pe baza unui control împotriva unei singure expresii.
Așadar, mixinul dvs. ar putea verifica dacă @border_on parametrul a fost setat la Adevărat ca astfel:
.border_and_bg (@border_on, @border_color, @ bg_on, @ bg_color) atunci când (@border_on = true) border: 1px solid @border_color;
Totuși, pentru că lipsește funcția "if / else", nici nu are capacitatea de a verifica ulterior valoarea lui @bg_on, nici să ofere o valoare alternativă pentru frontieră proprietate în cadrul aceluiași mixin.
Pentru a realiza aceeași logică care a fost tratată cu un singur mixer Sass, ar trebui să creați patru mixuri diferite păstrate cu mai puțin, adică una pentru fiecare dintre posibilele combinații de @border_on și @bg_on valori, cum ar fi:
.border_and_bg (@border_on, @border_color, @bg_on, @ bg_color) atunci când (@border_on = true) și (@bg_on = true) border: 1px solid $ border_color; fundal-culoare: @ bg_color; .border_and_bg (@border_on, @border_color, @bg_on, @ bg_color) când (@border_on = false) și (@bg_on = false) border: 0; fundal-culoare: transparent; .border_and_bg (@border_on, @border_color, @bg_on, @ bg_color) atunci când (@border_on = false) și (@bg_on = true) border: 0; fundal-culoare: @ bg_color; .border_and_bg (@border_on, @border_color, @bg_on, @ bg_color) atunci când (@border_on = true) și (@bg_on = false) border: 1px solid @border_color; fundal-culoare: transparent;
Și asta are doar două valori pentru a verifica; numărul crește cu fiecare valoare pe care doriți să executați logică, ceea ce poate deveni foarte dificil deoarece doriți să creați mixuri mai sofisticate. Este, de asemenea, un proces dificil de a lua în considerare toate permutările posibile ale combinațiilor variabile pentru a le explica pe toate.
Acesta este doar un exemplu în care logica îmbunătățită face viața mai ușoară cu Sass vs. LESS, dar sunt multe altele. În special, Sass oferă abilități excelente de iterație prin intermediul lui @pentru, @fiecare și @in timp ce directivă.
Și, în sfârșit, foarte important, în timp ce LESS are câteva funcții excelente încorporate, Sass face foarte ușor să vă scrieți. Sunt pur și simplu scrise ca:
Funcție funcțională @ ($ parametru) @return $ dosomething + $ parameter / $ somethingelse;
Aceste funcții logice deschid o lume de posibilități pentru lucruri cum ar fi crearea propriilor motoare de aspect, imagini pentru manipulare, modificări de culoare și comenzi rapide pentru un număr infinit de lucruri pe care s-ar putea să le găsiți de la proiect la proiect.
Din tot ce am citit și auzit oamenii care vorbeau despre asta, și din propria mea experiență, este această putere logică mult îmbunătățită care este principalul motor al oamenilor care aleg Sass peste LESS.
Cu mai puțină excepție pentru majoritatea proiectelor datorită operațiunilor logice limitate, se ajunge la o alegere între Sass și Stylus, ambele având o gamă largă de caracteristici disponibile.
Și între cele două am ales Stylus. Stylus are puterea lui Sass, cu accesibilitatea mai mică.
Stylus.js face tot ce am nevoie de Sass, dar necesită doar JavaScript sau Node.js pentru a compila. În plus, are un mod particular de operare, care este neted și ușor de utilizat, și are o sintaxă frumoasă curată pe care o prefer.
Pentru mine, cerința de a rula Ruby on Rails și de a face cu pietre este un obstacol major în calea dorinței de a lucra cu Sass. Ruby nu face parte din niciunul dintre proiectele pe care le dezvolt, deci singurul motiv pentru care trebuie să mă confrunt cu instalarea acestuia și a oricăror pietre prețioase este să îl ocup doar de Sass. Acesta este un set de erori de conectare și probleme de instalare de care nu am nevoie dacă pot să o evit.
Bănuiesc că mulți alți oameni sunt, de asemenea, în aceeași barcă de a nu folosi altfel Ruby, și nu mai ales pentru a utiliza un preprocesor CSS.
În plus, chiar dacă trebuie să instalez Ruby pentru a utiliza Sass, mă mai găsesc nevoia de a lucra cu Node.js și NPM pentru a folosi Grunt pentru a trata alte aspecte ale proiectelor mele, cum ar fi urmărirea schimbărilor, combinarea și minificarea JavaScript și așa mai departe, precum și Bower pentru gestionarea altor pachete.
Notă: există un program numit Scout pentru Mac și Windows, care se va ocupa de compilație pentru dvs., dar din nou acolo unde este posibil, prefer să evit să instalez ceva pentru un singur scop, mai degrabă decât să lucrez cu instrumente pe care le pot folosi în mai multe scopuri. Există, de asemenea, CodeKit, dar numai Mac.
Deci, atunci când există un preprocesor ca Stylus care are toată puterea logică de care am nevoie, dar poate fi folosit cu ușurință cu IDE-ul preferat și configurarea Node.js existentă sau JavaScript pur, are sens să-l alegi.
Mulți oameni găsesc procesul de instalare pentru Sass intimidând din cauza factorului Ruby și alegeți LESS pentru acest motiv. Cu toate acestea, am constatat că ușurința de configurare pentru Stylus este, în esență, pe par cu mai puțin, oferindu-mi tot gama de funcționalitate logică.
Dar nu este vorba numai despre Ruby, sau chiar despre funcționalitatea logică disponibilă. Este vorba de felul în care funcționează Stylus și de sintaxa pe care o folosesc, pe care o consider incredibil de curată, flexibilă și netedă în comparație cu atât LESS cât și Sass.
Deci, acum, să vă spun de ce am ales Stylus și de ce ar putea fi noul dvs. erou CSS.
Așa cum am atins mai sus, am ales Stylus pentru ei:
Pentru a vă arăta cu adevărat de ce toate cele de mai sus mă fac să aleg Stylus, trebuie să intrăm și să începem să o folosim puțin, așa că vă pot arăta exact despre ce vorbesc.
Să începem cu cei mai mari oameni care se confruntă cu obstacole cu preprocesoarele CSS, oricare dintre acestea aleg, și asta e configurarea și compilația.
O mare parte din motivul pentru care am ales Stylus este că pot să o configurez ca parte a metodelor mele de creare a proiectelor obișnuite și prin aceasta să o pot folosi cu IDE-ul meu preferat. Lasă-mă să-ți arăt cum.
Da, există unele procese de linie de comandă care sunt implicate, totuși luați-o de la cineva care nu a folosit niciodată linia de comandă pentru un lucru înainte ca preprocesorii să o solicite - nu este nici pe departe atât de dificil pe cât credeți și folosirea liniei de comandă vă va face să vă simțiți zece la sută mai deștept decât înainte. :)
Acestea fiind spuse, am pus un pachet pe care îl puteți apuca apăsând butonul "Descărcare" din partea de sus a acestui articol, ceea ce înseamnă că abia trebuie să vă gândiți la linia de comandă dacă sunteți pe Windows. Doar câteva clicuri dublu și veți fi în picioare.
Dacă sunteți pe Mac sau Linux, nu vă temeți, deoarece sunt doar trei comenzi pe care va trebui să le rulați pentru a utiliza pachetul, vă voi face să vă spun cum și sunt foarte ușor.
Acest pachet vă va urmări fișierele sursă Stylus pentru modificări și le va compila în fișiere CSS pentru dvs. Puteți să-l utilizați cu orice IDE doriți, ceea ce este un mare avantaj al acestei abordări.
Pentru mine personal, e sublimul text epic 2. Este de asemenea IDE-ul pe care îl recomand pentru utilizarea cu Stylus datorită pachetului excelent de evidențiere a sintaxei Stylus disponibil pentru el, pe care o voi acoperi mai jos.
Node.js este destul de mult o trebuie să aibă în aceste zile pentru dezvoltarea web front end. Există atât de multe instrumente uimitoare care funcționează pe partea de sus a acesteia, astfel încât instalarea vă va stabili nu numai pentru Stylus, ci și pentru o mulțime de alte lucruri prea.
Accesați http://nodejs.org/download/ și descărcați programul de instalare pentru sistemul dvs. de operare.
Rulați programul de instalare ca pe oricine altcineva pentru a pune Node.js pe sistemul dvs..
Grunt este un instrument incredibil pentru executarea sarcinilor JavaScript. Puteți să-l utilizați în peste două mii de scopuri diferite prin intermediul pluginurilor sale, listate aici: http://gruntjs.com/plugins
În cazul nostru, o vom folosi pentru a viziona fișierele Stylus și pentru a le compila în CSS ori de câte ori se schimbă.
Pregătiți-vă pentru primul gust de linie de comandă, deschideți astfel o fereastră / terminal de comandă.
Pe Windows, cel mai simplu mod este să deschideți Windows Explorer, apoi să țineți apăsată tasta SHIFT în orice dosar și să faceți clic dreapta. În meniul contextual veți vedea "Open window window here", pe care ar trebui să faceți clic pe:
Alternativ, puteți face clic pe butonul "Start", apoi căutați "cmd" și apăsați ENTER pentru a afișa fereastra de comandă.
Dacă sunteți pe Linux, presupun că probabil știți deja cum să deschideți un terminal, dar dacă nu aici este un ghid pentru modul în care diferitele distrosuri: https://help.ubuntu.com/community/UsingTheTerminal
Și dacă sunteți pe Mac, aruncați o privire la introducerea unui designer la linia de comandă.
Acum, tastați următoarea comandă și apăsați ENTER:
npm instalare -g grunt-cli
Veți vedea o încărcătură de text așa cum apare în fereastră:
Așteptați până se termină toate și apare un prompt de comandă nou. Aceasta va însemna că instalarea este completă și apoi puteți închide fereastra de comandă / terminal. Trebuie doar să faceți acest lucru o dată, deoarece va instala Grunt pe sistemul dvs. cu acces global, astfel încât să îl puteți utiliza din orice folder viitor de proiect pe care îl configurați.
Acum sunteți gata să configurați un proiect real utilizând pachetul StylusCompiler pe care l-am furnizat. Acesta este procesul pe care îl veți repeta pentru fiecare proiect de design nou pe care îl începeți.
Să facem acest pas cu pas.
Creați un dosar care să vă găzduiască proiectul. Pentru acest demo, o vom numi EGProject.
În interiorul acestuia, creați un al doilea folder numit css. Acesta este dosarul în care vor fi înscrise fișierele CSS.
Acum extrageți StylusCompiler.zip fișier în acest dosar.
Ar trebui să ajungeți la o structură care arată astfel:
Du-te în StylusCompiler și, dacă sunteți pe Windows, faceți dublu clic pe fișierul numit double_click_to_install.bat.
Dacă nu sunteți pe Windows, deschideți un terminal în StylusCompiler (sau deschideți un terminal și apoi navigați / cd în dosar). Introduceți următoarele, apoi apăsați ENTER:
npm installAceasta va instala compilatorul în dosarul proiectului. Din nou, veți vedea o grămadă de chestii de genul ăsta care apar în fereastră:
Dacă sunteți pe Windows și ați făcut dublu clic pe fișierul .bat, fereastra se va închide odată ce instalarea sa terminat. Dacă nu, așteptați până când textul se oprește și apare un nou prompt de comandă. Păstrați terminalul deschis pentru următorul pas. Acum, tot ce trebuie să faceți este să inițiați funcția de "ceas" pe care ați instalat proiectul prin Grunt. Acest lucru va viziona stylus dosar în interiorul StylusCompiler dosarul pentru modificările aduse oricăror .Styl fișiere din cadrul acestuia.
Doar creați toate fișierele Stylus de care aveți nevoie stylus dosarul și sunteți bine să mergeți. Notă: Toate fișierele dvs. Stylus trebuie să aibă .Styl extensie de fișier. Când modificările sunt salvate în fișierele din acel folder, pachetul va compila codul dvs. Stylus în CSS și îl va scrie într-un fișier numit style.css în css dosarul proiectului. Încă în StylusCompiler , dacă sunteți pe Windows, faceți dublu clic pe fișierul numit watch_and_compile.bat.
Dacă nu sunteți pe Windows, cu terminalul încă în StylusCompiler , tastați următoarele, apoi apăsați ENTER:
Ceasul de grunt
Ar trebui să vedeți acest lucru în fereastra / terminalul de comandă:
Acum, dacă salvați modificările la orice fișier din StylusCompiler> stilou (atâta timp cât nu ați făcut greșeli în codul dvs.), veți vedea următoarele:
Când ați terminat lucrul la fișierele Stylus, puteți să închideți fereastra de comandă / terminal sau dacă aveți nevoie să executați o altă comandă, puteți apăsa CTRL + C pentru a opri sarcina "watch".
Unul dintre motivele pentru care îmi place să lucrez cu acest tip de configurare a proiectului este că aveți control total, astfel încât să vă puteți configura proiectul oricum vă place și să vă schimbați în orice moment. Dacă doriți să modificați lucruri precum folderul de ieșire pentru css-ul dvs., numele fișierului de ieșire, dacă CSS este comprimat sau nu și așa mai departe, puteți face acest lucru în fișierul numit Gruntfile.js în StylusCompiler pliant.
Folosim pluginul Grunt-contrib-stylus pentru Grunt pentru a face compilația, astfel încât să puteți obține o descriere completă a tuturor configurațiilor posibile pentru aceasta: https://github.com/gruntjs/grunt-contrib-stylus.
Totuși, aici sunt principalele opțiuni pe care le veți dori.
Seteaza comprima opțiunea pentru Adevărat pentru CSS miniaturizate pentru producție sau pentru fals pentru CSS extins în timp ce sunteți încă în curs de dezvoltare.
Numele de fișier implicit la care se va scrie este "style.css". Dacă doriți ca fișierul să fie denumit altceva, înlocuiți "style.css" cu alegerea dvs. pe această linie.
Implicit, compilatorul va căuta un nivel de la StylusCompiler folder și scrieți în css dosar.
Dacă doriți ca fișierele dvs. CSS să fie scrise altundeva, schimbați valoarea de pe această linie "... / css" la locația preferată.
Așa cum am menționat mai sus, frumusețea acestei abordări este că puteți folosi orice IDE pentru a edita fișierele Stylus și ele vor compila același lucru. Cu toate acestea, vă recomandăm cu insistență utilizarea textului Sublime 2 ca pachet de evidențiere a sintaxei Stylus disponibil pentru a lucra cu Stylus a delight.
Puteți descărca Sublime Text 2 aici: http://www.sublimetext.com/2.
După descărcarea și instalarea, accesați această pagină și urmați instrucțiunile pentru instalarea pachetului "Controlul pachetelor", managerul minunat de pachete pentru textul sublim: https://sublime.wbond.net/installation#st2
În cele din urmă, instalați pachetul de evidențiere a sintaxei Stylus. Deschideți Controlul pachetelor prin accesarea Preferințe> Controlul pachetelor astfel:
În lista care apare, faceți clic pe opțiunea "Instalați pachetul" și așteptați câteva secunde în timp ce este recuperată o listă de pachete disponibile:
Introduceți "stylus" în câmpul de deasupra listei de pachete pentru ao căuta, apoi faceți clic pe rezultatul intitulat "Stylus" pentru ao instala:
Acest pachet va deveni acum greu de citit, formatul obișnuit de CSS, cum ar fi:
... în codul formatat cu ușurință, diferențiat în format Stylus, astfel:
Unul dintre lucrurile pe care le-am absolut de dragoste despre Stylus este flexibilitatea sa totală pe sintaxă.
Cu mai puțin, toate codurile trebuie să fie scrise în același mod în care ați scrie CSS obișnuit, adică trebuie să includeți acolade, dulce și punct și virgulă în același mod în care ați fi în CSS.
Cu Sass / SCSS aveți posibilitatea de a alege:
Stylus, pe de altă parte, este complet flexibil și nu trebuie să setați opțiuni de compilare pentru a vă ocupa de modul în care doriți să scrieți.
Toate aceste exemple se vor compila în Stylus, iar abordările pentru sintaxă pot fi utilizate împreună în același document:
Numai Stylus permite omiterea tuturor acestor elemente de sintaxă, în grade diferite, și combinația "în mișcare" a acestor abordări, astfel încât să puteți face ceea ce simțiți pe măsură ce proiectul dvs. se mișcă.
Această funcționalitate este uimitoare pentru dezvoltare. Veți fi surprinși să aflați cât de mult vă este fluxul atunci când omiteți toate sintaxele "punctuație" pe care le puteți. Codificarea și procesul de gândire pe măsură ce vă deplasați va deveni mult mai neted. Și cu evidențierea sintaxei oferită de pachetul pe care l-am instalat mai devreme, veți găsi că codul dvs. va fi la fel de ușor de citit.
Dar, în același timp, compilația este foarte iertatoare. Dacă decideți, dintr-un motiv sau altul, că sintaxa obișnuită a CSS va face o parte mai bună a organizării documentului dvs., puteți merge chiar înainte și o puteți folosi ori de câte ori doriți. Și dacă pierdeți accidental un punct și virgulă aici sau acolo, nimeni nu se minte.
Ați văzut mai sus câteva exemple despre modul în care variabilele, mixurile, verificările condiționale și funcțiile arată în LESS și Sass. În ochiul meu, găsesc abordarea Stylus pentru aceștia mai ușor să privească, să citească și să lucreze în general.
În LESS, variabilele trebuie să fie prefixate cu @ simbol. În Sass, ele trebuie să fie prefixate cu $ simbol. Cu toate acestea, în Stylus, o variabilă nu trebuie să fie prefixată cu nimic.
Notă: Puteți utiliza opțional opțiunea $ dacă preferați, dar nu și @ simbol, deoarece acest lucru este rezervat pentru alte scopuri în Stylus.
În mod similar, amestecurile, verificările condiționale și funcțiile nu trebuie preplătite cu nimic în Stylus.
În LESS, un mixin trebuie să fie scris în același mod în care ați scrie o clasă CSS regulată și nu există verificări condiționale sau funcții personalizate.
În Sass, amestecurile trebuie să fie prefixate cu @mixin și chemat cu @include, verificările condiționale sunt scrise ca @dacă și @else, și funcțiile trebuie să fie prefixate cu @funcţie și include o linie prefixată cu @întoarcere.
Nici unul dintre aceste lucruri nu este necesar în Stylus. Puteți scrie pur și simplu în mod natural așa cum ați putea în limba obișnuită. De exemplu, mai devreme am folosit acest exemplu Sass mixin și funcția:
@mixin border_and_bg ($ border_on, $ border_color, $ bg_on, $ bg_color) @ dacă $ border_on == true border: 1px solid $ border_color; @else border: 0; @if $ bg_on == true background-color: 1px solid $ bg_color; @else background-color: transparent;
Funcție funcțională @ ($ parametru) @return $ dosomething + $ parameter / $ somethingelse;
Acest mixin și funcția ar fi numit astfel:
.callem @ include border_and_bg (true, # 000, true, #fff); font-size: funcția-nume (6);
În Stylus, acestea pot fi scrise și numite după cum urmează:
Acest lucru pentru mine este foarte curat, ușor de citit și scris, și în conformitate cu obiectivul preprocessor de a face codul curat și minim.
Rețineți, de asemenea, că, în exemplul de mai sus, am omis toată sintaxa "punctuație" care poate fi lăsată afară, este total opțională cât de mult doriți să o lăsați în afara dezvoltării.
De exemplu, am sunat border_and_bg mixin fără probleme, scriind-o în esență în același mod în care aș avea o proprietate CSS obișnuită, fără paranteze în jurul parametrilor sau virgulele între ele. Cu toate acestea, dacă preferați să puteți include paranteze și virgule atunci când apelați mixuri, depinde de dvs..
Unul dintre cele mai bune lucruri despre lucrul cu Sass și LESS sunt bibliotecile Compass / Bourbon și LESShat mixin, respectiv. Dar nu veți pierde o minunată bibliotecă de mixuri cu Stylus, grație Nib.
Pachetul "StylusCompiler" pe care ți l-am furnizat se instalează automat (grație grunt-contrib-stylus) și include Nib în proiectul tău, deci nu trebuie să faci nici un alt pas pentru ao folosi.
Nib oferă mixuri pentru toate efectele CSS3 pe care le-ați aștepta, fiecare dintre acestea putând fi numite fără probleme, ca și cum ați folosi o proprietate CSS obișnuită. De asemenea, include o gamă impresionantă de amestecuri pentru alte funcții, cum ar fi poziționarea, resetarea / normalizarea, clarificarea, imaginile receptive și multe altele.
Consultați documentele pentru o analiză completă aici: http://visionmedia.github.io/nib/
Notă: O a doua opțiune de bibliotecă mixin pentru Stylus este Axa.
Stylus are o mulțime de alte caracteristici minunate, realizate în felul său unic și foarte curat, și chiar ar trebui să verificați întregul lot aici: http://learnboost.github.io/stylus/
Cu toate acestea, există un cuplu în special pe care îl iubesc cu adevărat.
Restul parametrilor vă permit să treci un număr nedeterminat de valori într-un mixin fără a fi nevoie să le cartografiați explicit în crearea mixului. Puteți extrage o anumită valoare și apoi treceți "restul" folosind args ... și args. De exemplu:
Uneori este posibil să repetați o anumită valoare de câteva ori, dar numai într-un singur stil, așa că trebuie să declarați o variabilă care să o dețină poate fi depășită.
Cu ajutorul funcției de căutare proprietate, puteți căuta valoarea oricăror proprietăți declarate în același stil sau în stil parental. De exemplu:
Tot ce trebuie să faceți este să utilizați @ înainte de proprietatea pe care doriți să o căutați. Stylus va arăta mai întâi în același stil, iar dacă nu găsește niciun rezultat, va verifica părintele și va continua să explodeze până când se va ajunge la o potrivire sau va ajunge la rădăcina documentului și va reveni la "null".
Sperăm că acum vă veți simți pregătit să vă ocupați de crearea Stylus dacă ați fost precaut de linia de comandă înainte și sunteți destul de curios să investiga dacă vă place puterea lui Sass, dar preferați să lucrați cu Node.js pe Ruby. Și chiar dacă nici unul dintre cei doi nu este deosebit de relevant pentru dvs., sper că sunteți destul de intrigat de unele dintre abordările unice luate de Stylus pentru a-l roti și a avea o joacă cu ea.
Pentru a încheia, aș vrea să vă las o listă de bunuri interesante legate de Stylus pentru a vă uita prin ele, unele menționate în cele de mai sus, precum și unele extra.
se bucura!
Accentsconagua