Share
Sass este proiectat pentru a ajuta la scrierea mai rapidă a CSS; mixurile sunt caracteristicile care fac posibilă. Mai multe biblioteci de greutate există cu formule complexe pentru fiecare situație, însă astăzi voi arăta cum să vă amestecați propriile mixuri care să completeze fluxurile de lucru existente.
miniatură: mâncați ou pe PhotoDune.
Notă: Fișierele documentului finalizate pot fi descărcate înainte de a vedea ceea ce vom crea și vom obține o idee despre cum arată fișierele Sass crude.
Am folosit Sass în dezvoltarea mea de front-end pentru mai mult de un an, iar amestecurile au fost caracteristica pe care am introdus-o imediat. Am văzut o reducere instantanee a timpului petrecut în scrierea foilor de stil, indiferent cât de mare sau mic a fost proiectul. Dar ce sunt amestecurile? De pe site-ul web Sass Language:
Mixins sunt una dintre cele mai puternice caracteristici Sass. Acestea permit reutilizarea proprietăților stilurilor sau chiar selectorilor - fără a le copia și lipi sau a le muta într-o clasă non-semantică.
Puneți un alt mod, amestecurile sunt generatoare de coduri. Creați un mixin în foaia de stil Sass cu @mixin directive, definiți regulile CSS pe care ar trebui să le emite și le numiți oricând aveți nevoie de acele reguli incluse într-o declarație de stil. Folosesc mixuri exclusiv pentru funcții CSS3, cum ar fi umbrele în casetă, umbrele de text și razele frontierelor. Multe dintre aceste caracteristici nu sunt pe deplin acceptate și necesită un prefix de vânzător, cum ar fi -webkit-, -moz-, -ms-, -o- să lucreze așa cum era de așteptat. În loc să scriu cinci reguli de fiecare dată când vreau să utilizez o caracteristică CSS3, pot apela un mixin de o singură linie și o pot genera pentru mine.
Acești primii doi pași necesită deschiderea aplicației Terminal (Command Prompt în Windows) pentru a verifica limba Ruby și pentru a instala gemul Sass. Căutați terminalul în următoarele locuri:
Odată ce terminalul este deschis, tastați următoarea comandă pentru a verifica instalarea Ruby. Nu introduceți semnul dolarului - este locul dvs. de substituție.
$ care rubin
Ar trebui să vedeți niște informații despre cale, cum ar fi / / Local / bin usr sau un mesaj de eroare dacă Ruby nu este instalat. Aici este ieșirea de la terminalul meu OS X:
Dacă primiți o eroare sau știți că Ruby nu este instalat pe mașina dvs., iată câteva resurse pentru a începe și a alerga cu un efort minim. Procesul de instalare a Ruby este dincolo de domeniul de aplicare al acestui articol și este bine documentat pe site-urile de mai jos.
Odată ce ați verificat sau instalat limba Ruby, Sass este un snap. Din terminal, introduceți această comandă: $ gem instalează sass. Dacă utilizatorul dvs. nu are permisiunile corecte, este posibil să fie necesar să executați comanda cu sudo (Utilizator super) asa: $ sudo gem instala sass. În câteva secunde, ar trebui să vedeți ieșiri asemănătoare cu ecranul de mai jos.
În timp ce nu nevoie o aplicație compilator precum LiveReload, Compass sau CodeKit pentru a compila Sass în CSS de vanilie, face prima călătorie în jurul blocului mult mai netedă. CodeKit este doar OS X, LiveReload este în primul rând pentru OS X, cu o versiune beta Windows; Compass App funcționează pe OS X, Windows și Linux. Licențele variază de la 10 USD până la 25 USD în momentul scrierii, dar merită pentru timpul salvat, pe măsură ce ajungeți mai adânc în dezvoltarea Sass.
Acum ar fi un moment bun să menționăm că Sass vine în două arome, .Sass și .SCSS. Fără a intra în specific, rămân cu sintaxa .scss deoarece seamănă foarte mult cu CSS de vanilie și se compilează fără sughițe.
După ce ați configurat compilatorul, veți dori să configurați un director de lucru cu fișierele HTML și CSS. Pentru acest tutorial, am creat un eșantion numit Scrieți propriile dvs. Sass Mixins. Mai jos este structura pe care o voi referi în tot tutorialul. Dacă nu ați descărcat încă fișierele de documente, faceți acest lucru și adăugați fișierele Museo Sans și Droid Serif în directorul / fonturi. Aceste fonturi sunt necesare pentru unele dintre mixurile pe care le vom crea mai târziu în tutorial.
Scrie propriile Sass Mixins index.html / css (director) / fonturi (director) / scss (director) | - main.scss
Deoarece am optat pentru LiveReload, îi vom spune să urmărească modificările care ar trebui să fie compilate în CSS. Când activați LiveReload, trebuie să fiți întâmpinați cu ecranul prezentat mai jos. Glisați directorul de lucru în bara laterală Foldere monitorizate din fereastra LiveReload.
În continuare, veți dori să verificați Compilați SASS, LESS, Stylus, CoffeeScript și altele cutie. Clic Opțiuni pentru a selecta următoarea cale de ieșire.
Ar trebui să vedeți o masă goală cu căile de ieșire evidențiate și scss / main.scss verificate pe prima linie. Apasă pe Setați folderul de ieșire ... butonul aici. Dosarul CSS trebuie selectat în mod prestabilit. Faceți clic pe Setare dosar de ieșire și Aplicați.
Actualizați fișierul index.html cu acest cod și actualizați browserul. Indicele dvs. ar trebui să arate ca ecranul de mai jos.
Scrieți propriile dvs. Sass Mixins Un text vine aici.
LiveReload oferă extensii de browser pentru Firefox și Chrome, dar cea mai rapidă modalitate de a intra în funcționare este să copiați următorul fragment Javascript (din fereastra LiveReload) în fișierul index.html, chiar deasupra închiderii corp etichetă. Odată ce acest fragment este disponibil, LiveReload va asculta modificările aduse fișierelor HTML și Sass și va actualiza automat browserul - nu mai este niciun Command + R la fiecare câteva minute.
Acum, când terminăm cu gospodăria, putem începe să creăm mixuri și să lăsăm compilatorul să facă munca grea.
Așa cum am spus mai devreme, am folosit o mulțime de caracteristici CSS3 în layout-urile mele. Problema cu aceste caracteristici de vârf este că acestea necesită o mulțime de prefixe ale vânzătorilor și nu am mult răbdare. Dacă pot scrie o combinație o dată, în loc de cinci linii puternic dublate de CSS de fiecare dată când vreau colturi rotunjite, o voi face.
Amestecurile sunt identificate în fișierele Sass de către @mixin () declaraţie. Ori de câte ori un procesor precum LiveReload vine pe această sintaxă, ea caută argumente în interiorul parantezelor și instrucțiuni asemănătoare CSS în interiorul coastelor curl. Compilatorul va interpreta apoi acele instrucțiuni și va afișa CSS pur în foaia de stil, main.css în acest caz.
Deschideți fișierul principal.scss și copiați următorul cod mixin. Când faceți clic pe Salvați, fereastra browserului dvs. cu index.html ar trebui să se reîncarce automat și va avea o div divizată în centru cu colțuri rotunjite la 6px.
/ * Main.scss * / @mixin raza de graniță ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-raza de graniță: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ra-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; raza de graniță: $ topLeft $ topRight $ bottomRight $ bottomLeft; #wrapper @ include raza de graniță (6px, 6px, 6px, 6px); lățime: 750px; înălțime: 250px; fundal: #eee; marja: 0 auto;
Așa că am început un început bun cu primul nostru mixin. Dar mixin-raza de frontieră are un punct slab: Dacă aplicăm o margine cu o opacitate mai mică de 100%, fundalul va fi afișat. Nu este chiar o alegere excelentă în multe cazuri.
Din fericire avem o rezolvare ușoară în proprietatea clipului de fundal. Dacă nu sunteți familiar, Chris Coyier de la CSS-Tricks are o mare scriere pe proprietate.
Amestecurile Sass pot fi, de asemenea, extinse cu alte amestecuri. Acest lucru ne permite să scriem clipul de fundal separat și să creăm un al treilea mixin care îl numește și regulile noastre de rază de graniță din pasul anterior. Adăugați următorul cod în fișierul principal.scss și salvați-l. După reîmprospătarea browserului dvs., ar trebui să vedeți un fundal albastru și o margine semi-transparentă mai ușoară a razei albastre.
/ * Main.scss * / @mixin raza de graniță ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-raza de graniță: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ra-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; raza de graniță: $ topLeft $ topRight $ bottomRight $ bottomLeft; @mixin fundal-clip background-clip: padding-box; @mixin combinat-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) @include fundal-clip; @ include raza de graniță ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft); corp fundal: albastru; #wrapper width: 750px; înălțime: 250px; fundal: #eee; marja: 0 auto; margine: rpx (255, 255, 255, 0.3) solidă; @ include raza combinată (6px, 6px, 6px, 6px);
Deși am inițiat inițial un număr de linii, avem acum un mixin reutilizabil, care poate fi apelat oricând prin furnizarea valorilor razei de graniță. Și se va face în mod corespunzător.
Umbrele de text reprezintă o modalitate excelentă de a introduce și tratamente tipografice și butoane. Le folosesc adesea pentru stările de navigare selectate, filele sau etichetele. Ele sunt, de asemenea, unul dintre elementele cele mai infurioare, deoarece IE9 nu le suportă, și nu există soluții bune pentru CSS pur.
În ciuda acestui fapt nefericit, includ codul mixin pentru celelalte browsere moderne și IE 10 beta. Am întâlnit, de asemenea, un script jQuery pentru randarea text-shadow în IE9 sau mai mic.
Pentru browserele moderne, proprietatea umbră a textului este structurată la fel ca umbra în cutie, cu parametrii de compensare orizontală și verticală, neclaritate și culoare. Adăugați următorul cod în fișierele principale.scss și index.html și ar trebui să vedeți o umbră neclară de 3px în spatele textului albastru.
/ * Main.scss * / @mixin text-shadow ($ horizOffset, $ vertOffset, $ blur, $ color) -webkit-text-shadow: $ horizOffset $ vertOffset $ blur $ color; -moz-text-shadow: $ horizOffset $ vertOffset $ blur $ culoare; -ms-text-shadow: $ horizOffset $ vertOffset $ blur $ culoare; / * IE 10+ * / -o-text-shadow: $ horizOffset $ vertOffset $ blur $ culoare; text-shadow: $ horizOffset $ vertOffset $ blur $ culoare; #wrapper, # wrapper-text-shadow lățime: 750px; înălțime: 250px; fundal: #eee; margine: 0 auto 20px; umplutura: 15px 0 0 15px; margine: rpx (255, 255, 255, 0.3) solidă; @ include raza combinată (6px, 6px, 6px, 6px); # înveliș-text-umbră> p font-size: 36px; Culoarea albastra; @ include text-shadow (0, 3px, 3px, # 333);
Index.html, adăugați doar după div # tag de închidere
Text test de umbre.
Pentru ultimul pas, am creat mixuri pentru umbrele cutiei, gradiente de fundal, @ declarații de tip font-facial și randare de tip îmbunătățită. Aceste mix-uri au fost testate în browserele moderne (Firefox, Chrome, Safari, Opera, IE9) și includ toate prefixele furnizorilor.
Nu voi intra în detaliu despre fiecare; observațiile detaliate sunt incluse în fișierul principal.scss. Amestecurile urmează un format de bază și pot fi construite pe măsură ce cerințele dvs. se schimbă. Dacă aveți nevoie de un CSS, se poate scrie un amestec pentru a-l servi.
Actualizați fișierele index.html și main.scss cu următorul cod. După reîmprospătare, ar trebui să vedeți o fereastră de browser care conține un număr de casete, fiecare prezentând un alt test de mixin.
Doar un fragment de Textmate Box test umbra.Încercați umbra de încercare în cutie.Text test de umbre.Încercare de fundal gradient.@ font-face test în Museo 700 sans.Îmbunătățiți lizibilitatea textului și testul de kerning.
Accentsconagua
@mixin raza de graniță ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-raza de graniță: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ra-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; raza de graniță: $ topLeft $ topRight $ bottomRight $ bottomLeft; @mixin fundal-clip background-clip: padding-box; @mixin combinat-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) @include fundal-clip; @ include raza de graniță ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft); @mixin box-shadow ($ horizOffset, $ vertOffset, $ blur, $ color) / * Blur este un parametru opțional, dar ajută la înmuierea umbrei. Apelați mixinul prin aplicarea valorilor pixelilor pentru $ horizOffset, $ vertOffset și $ blur și o valoare hex pentru $ color. Regula de colaps de frontieră este inclusă pentru a face umbrele în mod corespunzător în IE9. * / -webkit-box-shadow: $ horizOffset $ vertOffset $ blur $ culoare; -moz-box-shadow: $ horizOffset $ vertOffset $ blur $ culoare; -ms-box-shadow: $ horizOffset $ vertOffset $ blur $ culoare; -o-box-shadow: $ horizOffset $ vertOffset $ blur $ culoare; caseta-umbra: $ horizOffset $ vertOffset $ blur $ color; colapsul frontierelor: separat; @mixin box-shadow-inset ($ horizOffset, $ vertOffset, $ blur, $ color) / * Acelasi parametru ca @mixin box-shadow, dar creeaza o umbra interioara pentru efecte presate sau incastrate. * / -webkit-box-shadow: $ horizOffset $ vertOffset $ blur $ culoare inset; -moz-box-shadow: $ horizOffset $ vertOffset $ blur $ culoare inset; -ms-box-shadow: $ horizOffset $ vertOffset $ blur $ culoare inset; -o-box-shadow: $ horizOffset $ vertOffset $ blur $ culoare inset; box-shadow: $ horizOffset $ vertOffset $ blur $ culoare inset; @mixin gradient de fundal ($ direction, $ first-color, $ second-color) background: $ first-color; fundal-imagine: -webkit-gradient liniar ($ direction, $ first-color, $ second-color); fundal-imagine: -moz-linear-gradient ($ direction, $ first-color, $ second-color); fundal-imagine: -ms-linear-gradient ($ direction, $ first-color, $ second-color); fundal-imagine: -o-linear-gradient ($ direction, $ first-color, $ second-color); fundal-imagine: gradient liniar ($ direction, $ first-color, $ second-color); @ includeți clipul de fundal; Tipărire @mixin ($ font-name, $ font-longname) / * Asigurați-vă că creați un director / fonts la același nivel cu directorul / css pentru a vă asigura că șirurile de url de mai jos funcționează corect. Webfonturile vor include numele scurt pentru referință în declarațiile de tip font-familie și numele lung necesar pentru trimiterile la url. Mixinul va trebui invocat cu declarația @include imediat mai jos pentru a încărca fonturile în mod corespunzător. * / @ font-face font-familie: $ font-name; src: url ("... / fonturi /" + font-nume-nume + ".eot"); src: local ('☺'), url ("... / fonts /" + font-longname + ".woff" .ttf "format (" truetype "), url (" ... / fonts / "+ font-lungname +" .svg # webfontjVVPrHqE ") format ('svg'); font-weight: normal; font-style: normal; include tipografia ("Museo700", "Museo700-Regular-webfont"); @ include tipografia ("DroidSerifRegular", "DroidSerif-Regular-webfont"); @mixin improve-lizibilitatea / * Mixin-ul de îmbunătățire a lizibilității este recomandat pentru anteturi și cantități mai mici de text datorită randării reduse a resurselor. Nu este recomandat pentru dispozitivele mobile. Pentru mai multe informații, consultați articolul MDN (https://developer.mozilla.org/en-US/docs/CSS/text-rendering) sau Gigaom (http://gigaom.com/2010/08/12/ optimizabilitate-pentru-clar-text-in-your-browser /). Inspectați-vă în Chrome sau Safari și comutați redarea textului: activați și dezactivați regula Regula de legitimitate pentru a vedea efectul asupra kerning-ului. De asemenea, va activa ligaturi pe fonturile care acceptă seturi extinse. * / redare text: optimizabilitate; @ include text-shadow (0, 0, 1px, transparent); corp fundal: albastru; font-familie: Helvetica, Arial, sans-serif; font-weight: normal; # wrapper, # wrapper-inset-shadow, # wrapper-text-shadow, # wrapper-gradient de fundal, # wrapper-font-family, # wrapper-improve-lizibilitatea width: 750px; înălțime: 250px; fundal: #eee; margine: 0 auto 20px; umplutura: 15px 0 0 15px; margine: rpx (255, 255, 255, 0.3) solidă; @ include raza combinată (6px, 6px, 6px, 6px); #wrapper @ include caseta-shadow (0, 3px, 3px, # 333); # wrapper-inset-shadow @ include caseta-shadow-insert (0, 3px, 3px, # 333); # wrapper-text-shadow @ include text-shadow (0, 3px, 3px, # 333); font-size: 36px; Culoarea albastra; # wrapper-gradient de fundal @ include gradientul de fundal (top, # 999, #fff); # wrapper-font-family font-family: "Museo700", Helvetica, Arial; # wrap-improve-lizibilitatea> h1 font-family: "DroidSerifRegular", Georgia, "Times New Roman", serif; font-weight: normal; font-size: 48px; @ include îmbunătățirea lizibilității; 
Amestecurile Sass sunt o modalitate foarte bună de a te ridica și de a alerga rapid cu CSS3. Indiferent dacă vă aflați în cod sau dacă construiți un întreg site de la zero, mixurile vă vor îmbunătăți fluxul de lucru reducând liniile tastate și timpul petrecut în revizuirea sintaxei.
Deoarece aceste caracteristici sunt centrate pe CSS3, ar trebui să aveți un plan de rezervă pentru browserele mai vechi. Pentru unele site-uri, colțurile rotunjite și umbrele nu sunt critice și este perfect acceptabil să arătați un aspect vizual degradat. Pentru alții, un polyfill precum Modernizr poate oferi clase specifice clasei pentru a scrie reguli de rezervă CSS.
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
