Un gust de mixuri delicioase de la Bourbon

Aceasta este o parte dintr-o privire în profunzime a amestecurilor utile din biblioteca Bourbon. Voi prezenta cele mai importante și explicați cum puteți utiliza în practică acești economizători de timp.

Listă de bunuri

În acest tutorial vom examina următoarele șase amestecuri:

• Imagine de fundal mixin
• Linein Gradient mixin
• Radioconferință de intersecție
• Amestec de cutie
• Mixin de tranziție
• Font Face mixin

Exemplele de mai jos nu reprezintă neapărat cele mai bune practici de proiectare, dar au fost alese pentru a explora funcționalitatea de bază a acestor amestecuri.

Imagine de fundal Mixin

Acest mixin creează o imagine de fundal proprietate cuprinzând mai multe (până la zece) imagini de fundal delimitate cu virgulă, gradienți liniari sau gradienți radiali.

Cu imagini:

HTML:

Sass:

.ridicol-fundal + imagine de fundal (url ("[email protected]"), url ("thoughtbot-logo.png")) pozitie fundal: centru de sus, partea stanga sus-repeat: repeat-y -x înălțime: 560 px 

Atenţie! Aruncați o privire la prioritatea straturilor. Prima imagine este afișată în partea de sus. Același lucru este valabil și pentru pante.

Puteți folosi o notație de stenogramă pentru imagine de fundal asa:

Sass:

.ridicol-fundal + fundal (url ("[email protected]"), url ("thoughtbot-logo.png")) 

Cu gradienti:

Poți folosi Bourbon-ul liniar gradient funcția în interiorul imagine de fundal mixin.

HTML:

Sass:

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

Linear Gradient Mixin

Acest mic tip poate dura până la opt opriri de culoare și ia valori procentuale dacă doriți să reglați fin distribuția de culori.

HTML:

Sass:

$ start-gradient-color: # 268BD2 $ gradient-end-color: # 7229d1. gradient simplu + gradient liniar ($ gradient de start-culoare, $ end-gradient-color) 

De asemenea, puteți furniza un argument opțional pentru a controla direcția (în grade) a gradientului.

Sass

$ gradient-gradient + gradient linear (-90deg, $ start gradient-color, $ end-gradient-color) înălțime: 200px 

Radioul de rază de amestec Mixin

Acest amestec la îndemână facilitează orientarea colțurilor unei casete în perechi: colțurile de sus, de jos, din dreapta și din stânga. Dacă doriți colțuri rotunjite și doriți să evitați să introduceți declarații repetitive, acesta este prietenul tău.

HTML:

Sass:

.(0, 100%, 100%, 0,25) 0%, hsla (0, 100%, 100%, 0,08) 50%, transparent 50%), liniar -gradient (# 4e7ba3, întunecat (# 4e7ba4, 10%))) + raza de top-rază (3px) + înălțimea marginii-rază de fund (3px): 50px 

Comparați ambele gradienți și concentrați atenția asupra gradientului inferior, care are acum colțuri foarte subtile de 3px rotunjite. Prea multă rotunjire permite desenelor să arate adesea comic. Nu te complica!

Bineînțeles că poți să fii nebun cu razele de graniță. Dacă puneți ceva timp în ea, puteți construi unele lucruri interesante cu ea. Mai jos sunt câteva exemple absurde care ar trebui să ilustreze doar cum funcționează diferitele opțiuni.

Sass:

.frontiere super-duper + gradient liniar (gradient $ start-gradient, gradient $ end-color) + raza de top-raza (600px) + înălțimea marginii de fund: 100px 

Sass:

.frontiere super-duper + gradient liniar (gradient $ start-gradient, gradient $ end-color) + granița-dreapta-raza (600px) + înălțimea de 100% 

Box Mixing Mixin

Cu acest mixin puteți schimba cu ușurință modelul de cutie al unui element. Există trei opțiuni de alegere:

• frontieră-box
• conținut-box
• moşteni

Sass:

.profilul utilizatorului + dimensiunea cutiei (caseta de margine) 

Tranziția Mixin

Trebuie să remarcați imediat: atașați tranziție se amestecă cu Mod implicit starea selectorului (care urmează să fie schimbată de un eveniment cum ar fi hover) nu la pseudo-clasa!

HTML:

Sass:

.trandafir de tranziție + tranziție (toate 1.0s $ ease-in-sine) înălțime: 50px background-color: roșu + raza de sus-rază (5px) + fundal-rază (5px) + frontieră-top-raza (25px) + frontieră-bottom-raza (25px) 

Elementul implicit al elementului:

Se trece apoi la timpul specificat; aici 1.0s

Iată starea de hover după tranziție:

Puteți alege manual proprietățile pe care doriți să le influențeze tranziția. In loc de toate, utilizați numai proprietățile de care aveți nevoie. Diferite funcții de sincronizare pentru diferite proprietăți pot fi de asemenea înlănțuite împreună.

Sass:

// tot + tranziție (toate 1.0s $ ease-in-sine); // tranziție fină + tranziție (fundal-culoare 2.0 s $ ușurință în sine, înălțime 1.0 s $ usură-out-cubică); 

Pentru a ajusta comportamentul de tranziție, există o serie de variabile Sass foarte convenabile de la Bourbon pentru diferite funcții de temporizare la dispoziția dumneavoastră:

Font Face Mixin

Tipografia este o piesă esențială a puzzle-ului atunci când se proiectează proiecte de înaltă calitate pentru web. Pe un anumit nivel atomic, el ghidează atât de multe decizii de proiectare și poate influența percepția utilizatorului într-o multitudine de moduri.

@ Font-face permite proiectanților să personalizeze tipul oferind utilizatorilor fonturi personalizate pe care le-ar putea să nu le fi instalat pe mașinile lor.

Iată cum ați putea include în mod obișnuit @ Font-face în foile de stil de vanilie, presupunând că fișierele noastre de fonturi sunt plasate într-un director "fonts / SourceSansPro":

CSS:

@ font-face font-family: "SourceSansPro-Regular"; src: url ('Fonturi / SourceSansPro / sourcesanspro-regular.eot'); src: url ('fonts / SourceSansPro / sourcesanspro-regular.eot? #iefix') format (embedded-opentype), url ('fonts / SourceSansPro / sourcesanspro-regular.woff' (format 'fonts / SourceSansPro / sourcesanspro-regular.ttf') format ('truetype'), url ('fonts / SourceSansPro / sourcesanspro-regular.svg # source_sans_proregular') format ('svg'); font-weight: normal; font-style: normal;  @ font-face font-family: "SourceSansPro-Bold"; src: url ('Fonturi / SourceSansPro / sourcesanspro-bold.eot'); src: url ('fonts / SourceSansPro / sourcesanspro-bold.eot? #iefix') format (embedded-opentype), url ('fonts / SourceSansPro / sourcesanspro-bold.woff' (format "fonts / SourceSansPro / sourcesanspro-bold.ttf") ('truetype'), url ('fonts / SourceSansPro / sourcesanspro-bold.svg # source_sans_probold') format ('svg'); font-weight: normal; font-style: normal;  // aplica fonturi personalizate pentru unele clase. regular-font font-family: SourceSansPro-Regular; . font-bold font-family: SourceSansPro-Bold;  

Acest lucru poate deveni foarte plictisitor foarte repede și deschide ușa pentru greșeli. Din fericire, acele zile au dispărut acum și această practică devine depășită cu Bourbonul font-face mixin. Cu Bourbon, se pare că:

Sass:

+font-face (SourceSansPro-Regular, 'fonts / SourceSansPro / sourcesanspro-regular', normal) + font-face (SourceSansPro-Bold, fonts / SourceSansPro / sourcesanspro-bold). -Regular .bold-font font-familie: SourceSansPro-Bold 

Este atât de ușor! O reducere remarcabilă a codului. Există mai multe pentru a explora cu Fontin mixin prea, cum ar fi $ file-formate (care vă permite să specificați formatele pe care le utilizați) și Rails [$ Activ-conductă] (http://guides.rubyonrails.org/asset_pipeline.html) care este un pic mai avansat, dar vă poate ajuta să vă organizați activele.

Noroc!

Am atins doar suprafața listei extensive de amestecuri a lui Bourbon. Alăturați-mă în următoarea parte unde ne vom arunca cu alții.