Bourbon pe roci Funcții răcoritoare pentru îmbunătățirea sasului

Bourbon oferă o mulțime de funcții super utile, care sunt un plus de bun venit pentru funcțiile native pe care le oferă Sass. Să aruncăm o privire la câteva exemple minunate pe care ar trebui să le adăugați la geamul tău.

funcţii

În cazul în care mixurile ne ajută să repetăm ​​bucăți de stiluri mai eficient, funcțiile Sass ne ajută cu logică: acceptarea argumentelor și a valorilor returnate. Bourbon oferă câteva funcții foarte bune Sass pentru o varietate de cazuri de utilizare. În acest tutorial vom examina următoarea selecție:

• ratia de aur()
• Scară modulară ()
• liniar gradient
• tentă()
• umbră()
• em ()

ratia de aur()

Cu această funcție, este foarte ușor să se calculeze raportul de aur (1: 1.6180339) al unui anumit număr. Ca un cap de sus, ar trebui să menționez că această funcție este încet depreciate, făcându-se loc pentru Scară modulară () funcția. ratia de aur() este utilă dacă doriți să creați relații "semnificative" în tipografia dvs., de exemplu. Același lucru este valabil pentru relațiile structurale în aspectul dvs..

Scală tipografică

Dacă doriți să generați o scară modulară pentru a structura diferite dimensiuni de tip folosind raportul de aur, puteți aplica această funcție pentru a calcula medie de aur pentru orice număr. Construirea scării dvs. tipografice cu ea este simplă:

Primul parametru al funcției așteaptă a pixel sau em valoare reprezentată aici de o variabilă Sass definită mai sus. Al doilea parametru necesită un număr întreg ca un valoarea incrementării / decrementării (... -3, -2, -1, 0, 1, 2, 3 ...) pentru deplasarea în sus și în jos a scării folosind raportul de aur.

Iată scala tipografică folosind raportul de aur:

Sass:

$ font-size-font-size: font-size font-size: font-size-font-size: font-size-font-footip: golden-ratio 1 h3 font-size: font gold-ratio ($ base-font-size, 2) // valoarea dimensiunii incrementului proporțională cu raportul de aur cu factorul 1 h1 font-size: raportul de aur ($ base-font-size, 3) 

Exit CSS:

corp font-size: 10px;  .footnote font-size: 6.18px;  h3 font-size: 16.18px;  h2 font-size: 26.179px;  h1 font-size: 42.358px;  

Dacă trebuie să rotunji ieșirea, puteți utiliza funcțiile construite de Sass în acest scop:

• abs ()
• podea()
• ceil ()

Sass:

.dimensiunea fontului de subsol: etaj (raportul de aur ($ base-font-size, -1)) 

Sub capotă

Pe plan intern, funcția de raport de aur utilizează funcția de scară modulară, cu variabila de scalare $ de aur pentru raportul de aur.

Sass:

Funcția @ de aur funcțională (valoare $, incrementare $) @backurn modular-scale (valoare $, increment $, $ golden) 

Notă: Fantasticul cadru de rețea Bourbon Neat utilizează de asemenea raportul de aur în mod implicit pentru jgheaburi și coloane.

Scară modulară ()

Dacă sunteți în "tipografie mai semnificativă" și doriți să calculați o scară modulară pentru diferite dimensiuni de caractere, bazată pe un fel de relație numerică, această funcție ar putea fi interesantă pentru dvs. Poate calcula diferite scări modulare pentru tine - raportul de aur fiind doar una din optsprezece opțiuni pre-coapte.

Sass:

$ base-font-size: 10px // Alegerea raportului dvs. salvat într-o variabilă pentru ao schimba într-un singur loc // Aici am folosit raportul dublu-octave $ tip-scară: $ double-octave font-size: $ font-size: font-size-font-size: font-size-font-size-1 , tip de scală de tip h2) h2 font-size: scară modulară ($ base-font-size, 2, $ type-of-scale) h1 font-size: , tip de scară de tip $) 

Scalarea variabilelor

Bourbon a pregătit aceste variabile de rapoarte predefinite pentru diferite scale. Pentru a crea un design consistent, ar fi o bună decizie să nu amestecați diferite rapoarte pentru scara tipografică într-un singur proiect. Păstrați-l clasic, luând decizia asupra unui raport care vă reflectă cel mai bine intențiile.

Sass:

$ base-font-size: 10px h2 font-size: modular-scară ($ base-font-size, 2, 1.6180) 

liniar gradient ()

Dacă aveți nevoie de un gradient liniar în combinație cu mixer-ul imaginii de fundal, această funcție vă va economisi un pic de cod. Culoarea gradientului este definită de culoarea inițială, culoarea finală și opțional stop-puncte de culoare intre. Aceste opțiuni suplimentare de culori vă oferă posibilitatea de a crea tranziții mai sofisticate între culorile inițiale și cele finale sau pentru a oferi un gradient mai colorat.

Uitați-vă la acest gradient îngrozitor. Aici cred că este ușor să vedem cum liniar gradient () funcționează și cum o puteți utiliza:

Sass:

.gradient oribil + imagine de fundal (gradient liniar (45deg, // directon de linie de gradient roșu 10%, culoare inițială galbenă 15%, S Sângerări în galben roșu 40%, T portocaliu 45% , // O / sumează în portocaliu galben 50%, // P portocaliu 70%, // S / sumează în verde verde 90%) // culoarea finală) înălțime: 50 px 

Pentru culori puteți oferi opțional %, px sau em valori. Acestea definesc distanța pe care această culoare trebuie să o întindă. Probabil ar trebui să rămânem la folosire % de cele mai multe ori, totuși. Dacă nu oferiți procente ca valori de limitare, culorile se vor strecoși uniform, împărțite la numărul de culori din gradient.

Puteți furniza opțional un unghi pentru primul parametru - fie sub formă de valoare + deg sau la cu direcţie:

• 45deg
• 90deg
• la stânga sus
• la dreapta
• spre stanga

si asa mai departe.

Sass: cu parametru de direcție-de la stânga la dreapta

.gradient + fundal-imagine (gradient liniar (spre dreapta, galben 50%, albastru 60%)) înălțime: 50px 

Gradientul curge de la stânga la dreapta

Sau ceva mai sofisticat folosind HSLA () funcții și multiple liniar gradient () funcţii:

Sass:

.(0, 100%, 100%, 0,25) 0%, hsla (0, 100%, 100%, 0,08) 50%, transparent 50%), gradient liniar (# 4e7ba3, întunecat (# 4e7ba4, 10%))) înălțime: 50px 

Tint și Shade Color Functions

S-ar putea să fiți deja familiarizați cu funcțiile construite ale Sass pentru culori cum ar fi uşura() și întuneca() care fac exact ceea ce vă așteptați. Bourbon oferă două funcții suplimentare de culoare minunate pentru confortul dvs. Ambele funcții iau un parametru de culoare și procent pentru a regla mixul de culori.

tentă()

Funcția tentație modifică o culoare amestecând-o cu cea albă. Se așteaptă un al doilea parametru care să ia procentul de alb cu care doriți să amestecați culoarea.

Sass:

$ albastru: fundal # 2F7DD1. tint: nuanță ($ albastru deschis, 25%) înălțime: 100px 

Acest lucru nu are nici o nuanță ():

Și aceasta este cu nuanță ():

umbră()

Funcția de umbrire schimbă o culoare prin amestecarea cu negru. Această funcție are, de asemenea, un parametru de culoare și procentaj pentru ajustarea fină a amestecului de culori.

Sass:

$ albastru deschis: # 2F7DD1. fond fundal: umbra ($ luminos-albastru, 25%) înălțime: 100px 

Aici vedem ce se întâmplă fără umbre ():

Și aici cu umbra ():

em ()

Această funcție calculează pixeli în ems pentru dvs..

Sass:

font-dimensiune: em (12) 

Exit CSS:

font-size: 0.75; 

Noroc!

Asta e bine acoperit de Bourbon pentru moment. În ultimele câteva tutoriale am analizat în detaliu câteva dintre cele mai utile mixuri și funcții pe care le oferă.

În următoarea parte a acestei serii continue, vom arunca o privire la Bourbon Neat: un cadru de rețea pentru Sass și Bourbon.