Share
"Urăsc consola, nu fac Ruby și nu-mi pasă de variabile. De ce să învăț Sass în lume?" Nu mai fii și ascultă ...
Îl cunoști deja pe Sass! Da, da.
Sass are exact aceeași sintaxă pe care o are CSS. Coincidență? Nu. Sass a fost construit astfel încât designerii ca tine să-l poată lua cu ușurință și să învețe toate avantajele suplimentare în propriul ritm, dacă ei vor sa.
Când am văzut-o pentru prima dată pe Sass, de îndată ce am terminat cuvântul "terminal", m-am întors pe cealaltă cale. Nu mi-e teamă de terminal, este un instrument foarte util și l-am folosit (când este absolut necesar) de ani de zile, dar prefer doar o interfață de utilizator. Dacă nu există niciun UI, nu o voi folosi.
Ghici ce? Am aflat că există mai multe opțiuni.
Am folosit CodeKit deoarece a fost în Beta publică. În tot acest timp am folosit terminalul pentru Sass cam de trei ori și aș fi putut evita totul.
Deci nu vă plac Variabilele. Și de ce în lume ar trebui să vă petreceți timp înfășurați capul în jurul mixurilor, funcțiilor și a tot ce jazz? Ei bine, nu. Sass nu te va pedepsi pentru asta. Cu toate acestea, vă pot promite că, chiar și cu intențiile voastre cele mai pure, veți găsi mai devreme sau mai târziu folosirea lor. Nu pentru că ar trebui, dar pentru că vei dori. Același lucru se întâmplă și pentru mixuri.
Chiar dacă niciodată nu veți scrie vreodată o singură funcție Sass sau o mixin, veți reuși să le folosiți în cele din urmă pentru că veți găsi tot mai multe cadre care fac munca grea pentru dvs., permițându-vă să beneficiați de acea muncă prin utilizarea unui amestec.
Deci, să ne imaginăm că doriți să utilizați normalize.css pentru următorul dvs. proiect. Cum o să faci asta? Adăugați o altă etichetă de legătură în codul HTML? Sau poate folosi doar un @import declarație în CSS? În ambele cazuri, adăugați solicitări HTTP suplimentare; poate nu atât de mare de o afacere, dar nu este optimă și nu cea mai bună practică.
Puteți doar să copiați conținutul normalizării și să-l inserați în foaia de stil, dar brusc fișierul dvs. CSS devine dezordine și nici nu ați început proiectul! Atunci ce veți face atunci când se vor actualiza normalize.css? Copiați și lipiți din nou?!
În Sass ai putea să folosești ol ' @importși lăsați Sass să vă tragă normalize.css în stillesheet.css (ar trebui să redenumiți fișierele în .scss, dar din nou - nu este o afacere mare).
Principiile DRY (Do not Repeat Yourself) sunt deseori menționate în limbi de programare reale, dar nu există nici un motiv pentru care acestea să nu fie aplicate într-o oarecare măsură în CSS. La urma urmei, nu a fost motivul pentru care CSS a fost inventat în primul rând? În loc să specificați stiluri din nou în HTML, puteți crea brusc un nume de clasă și puteți declara toate stilurile dvs. acolo.
Cu toate acestea, de îndată ce începeți să importați codul făcut de alții (cum ar fi cadre, resetări etc.), este posibil să repetați ceva.
De exemplu, normalize.css stabilește fontul corporal implicit la "sans-serif". Îmi place, este un bun standard. Dar dacă vrem să folosim un font personalizat? Ar trebui să editați normalize.css? Și ce se întâmplă dacă se actualizează normalizarea? Va trebui să o facem din nou.
În final, probabil că vom ajunge la @import în CSS.
Acum trebuie să ne asigurăm că vom include normalizarea noastră în partea de sus a foii de stil și că suntem bine să plecăm. Vom suprascrie familia font-ului, apoi doar să fim siguri că hai să-l împușcăm !important declarație la sfârșit, nu? Gresit!
Din păcate, normalize.css nu este scris în Sass (încă), dar există oameni buni care au convertit normalized.css la Sass, pe care îl puteți folosi doar în CSS. De exemplu:
$ font-family: "Comic Sans";
Desigur, ar trebui să utilizați deja Normalize 2.0.1+, care nu mai include o declarație de tip font-familie, dar aceasta a fost mai mult o ilustrare a problemei și o soluție pentru aceasta.
CSS este un limbaj în evoluție. Dacă încă credeți că variabilele sunt rele, luați în considerare această specificație CSS, care oferă următorul exemplu:
: rădăcină var-header-color: # 06c; h1 culoarea de fundal: var (header-color);
Ei bine, dacă nu este o versiune urâtă a unei variabile, nu știu ce este!
Ideea este că CSS este o limbă care evoluează, deci chiar dacă ignorați pre-procesoarele cât timp puteți, va exista un punct în viitor în care veți fi forțat să învățați variabile oricum. Sfatul meu este să rămâi înaintea curbei și să adoptăm lucruri ca variabilele de la început!
Și nu doar Variabilele! Sass și alte preprocesoare au o mare influență asupra viitoarelor specificații CSS. Aici este o altă specificație în dezvoltare, care va permite cusarea codului CSS în viitor. Va arata cam asa:
/ * Următorul exemplu care utilizează ierarhiile: * / div, p & .keyword color: green; font-size: 10px; & .constant culoare: roșu; &: hover: după content: "[" attr (valoare) "]"; culoarea de fundal: verde; / * ... produce aceleași rezultate ca și următoarea CSS: * / div, p font-size: 10px; div.keyword, p.keyword culoare: verde; div .constant, roșu; background: culoarea verde; div .constant: hover: după, p .constant: hover: după content: "[" attr (value) "]
În cazul caietului de sarcini, nu se compilează niciun cod, aceasta este pur și simplu modul în care CSS va arăta probabil în viitor!
Specificațiile CSS nu sunt create de o grămadă de străini creatori deosebit de interesați, care doresc să-și controleze viața web de la distanță dintr-o galaxie foarte departe. Nu. Specificațiile sunt dezvoltate de către oameni, ceea ce înseamnă că alte persoane, în mod special dezvoltatori și designeri (ca dvs.) au influență asupra specificațiilor care sunt dezvoltate. Folosind pre-procesoare precum Sass, participi la ceva mult mai mult. Împingeți tehnologia în continuare.
Dacă vă propuneți o idee sau o cerere de caracteristică, puteți să o solicitați sau pur și simplu să participați la discuția despre modul în care o anumită caracteristică ar trebui să se comporte și dacă este necesară.
Datorită comunității care înconjoară Sass, există instrumente dezvoltate de alții pe care le puteți profita.
ZURB, de exemplu, a construit un cadru larg denumit Foundation for Sass.
Dacă preferați ceva mai greu, puteți considera Inuit.css.
Apoi, desigur, există Compass, care oferă un cadru cu multe opțiuni utile ...
... la fel ca și Bourbonul mai subțire.
Să presupunem că vă simțiți astăzi aventuroși și vă gândiți să folosiți "rem" ca unitate de măsură. Cum folosiți rems care oferă backback-uri pentru browserele învechite care nu le suportă? Din fericire, declarați de două ori dimensiunea fontului; o dată în pixeli, apoi din nou în rems pentru browserele care o vor înțelege și o vor analiza.
h1 font-size: 16px; font-size: 1rem;
Acesta ar fi probabil cel mai bun pariu, dar înseamnă că oriunde doriți să utilizați un rem, va trebui să-l tastați de două ori. De asemenea, în timp ce 16px = 1rem este un calcul ușor, ce dacă aveți nevoie de 19px? Acum faceți matematica în capul vostru. Poti tu? Da, am folosit si un calculator (1.1875rem).
Pentru că în comunitatea Sass există niște băieți minunați, puteți căuta rapid Github și puteți descărca acest fișier _rem.scss (care pare destul de intimidant, nu-i așa?), Îl importați (vom vorbi despre importare într-un moment) și acum poți face magic:
h1 @include rem (font-size, 2rem)
moment în care Sass va converti automat la asta
h1 font-size: 36px; font-size: 2rem;
Dacă ziua ar trebui să vină vreodată când puteți renunța la suportul de rezervă, nu va trebui să faceți o căutare Regex și să înlocuiți toate documentele. Puteți adăuga acest lucru în partea de sus a foii de stil.
$ print-rem-px-backbacks: false;
Cred că ați putea ghici ce face această setare "print rem px px backbacks" :)
Da. Am folosit trei caracteristici Sass în acest exemplu, o variabilă, o combinație personalizată și o declarație de import, dar a fost cu adevărat dificilă?
Deci, iată un lucru pe care îl veți face pentru restul vieții Web Developer. Definirea culorilor link-urilor. Știi, așa ceva:
a culoare: albastru; a: hover culoare: galben;
Este o sarcină frecvent repetată, dar nu am să vă sugerez să vă roșiți propriul Sass Mixin pentru astfel de lucruri. În schimb, de ce nu utilizați Compass (un cadru Sass)?
a @ include link-culori (albastru, galben);
Aceasta va fi compilată exact la fel ca mai sus. Și se citește destul de bine ("includeți culorile link-urilor: albastru și galben"), doar dacă vă întrebați cum funcționează, vizitați documentația compasului.
Dacă utilizați orice editor care acceptă fragmente, puteți seta (sau descărca) un fragment pentru a prefixa automat @include la afirmațiile dumneavoastră (nu te lasa sa te sperii).
Sass în sine oferă o mulțime de caracteristici foarte, foarte utile. Chiar dacă documentația Sass nu este cea mai frumoasă dintre toate lucrurile (din perspectiva designerului), ea conține multe informații utile despre caracteristicile Sass, de exemplu una dintre funcțiile mele preferate în Sass - Funcții de culoare. Nu trebuie să mai deschid Photoshop pentru a experimenta culoarea dacă am nevoie de o variantă. Pot face simplu acest lucru:
a culoare: lumină (negru, 10%);
Care este compilat în
a culoare: # 1a1a1a;
Sass nu este chestia asta rubinică pe care o folosesc dezvoltatorii hardcore. Ar trebui să te inspire, designerul, și să te ajute să lucrezi în fiecare zi. Nu este un limbaj de programare, este un Frontier Web.
Sass poate fi la fel de ușor cum vrei tu să fie. Dacă sunteți curios dacă puteți face ceva în Sass, căutați rapid Google, puteți fi surprins!
Cel mai important lucru de toate - stop faffing despre și începeți să utilizați Sass astăzi, mai ales dacă doriți să rămâneți în fața curbei! Și păstrați-vă ochii deschiși pentru toate tutorialele Sass, alegeți ce caracteristici ale lui Sass doriți și le folosiți!
Accentsconagua