Share
Acest articol este a doua parte a explorării mele în mixuri din biblioteca Bourbon Sass. Dintre acestea, veți găsi exemple utile, care vor accelera fluxul de lucru și vă vor minimaliza codul Sass.
Vom primi un gust de următoarele opt amestecuri:
Accentsconagua
Inline Block mixinPoziție mixinTriangle mixinClearfix mixinButon mixinDimensiune mixinHiPI interogare media mixinRetina Image mixinCa și în tutorialul precedent, exemplele de mai jos nu reprezintă neapărat cele mai bune practici de proiectare, dar sunt alese pentru a explora funcționalitatea de bază a acestor mixuri.
Punctele, în mod prestabilit, sunt afișate ca bloc element.
HTML:
„html
Yada yada yada
Yada yada yada
"
Elementele la nivel de bloc, cum ar fi paragrafele, creează automat un nou rând în aspect.
Acest amestec vine la îndemână dacă doriți să îl modificați afișajul implicit de elemente la inline-block. Nu numai că stabilește afișare: inline-block dar are, de asemenea, grijă de ciudățenii și sprijinul vechi pentru IE7.
Aflați mai multe despre afișarea pe designshack.net.
Sass: Aceste blocuri au un comportament asemănător cu flotorul, prin blocarea inline.
"css. paragrafe-comporta-ca-blocuri + inline-bloc de fundal-culoare: tomate
// sintaxa SCSS // paragrafe-comportă ca blocuri @ include inline-block; // "
Uitați-vă la ieșirea CSS generată. Cine vrea să se ocupe de lucruri atât de urâte ca oricum?
Exit CSS:
css. paragrafe-se comporta ca blocuri display: inline-block; aliniere verticală: linia de bază; zoom: 1; * afișare: inline; * vertical-align: auto; fundal-culoare: tomate;
Setat la afișare: inline-block, paragrafele sunt afișate în linie, dar își păstrează caracteristicile la nivel de bloc.
Atenţie! Observați spațiul alb dintre elementele blocului. Dacă ați fi folosit pluti pentru a obține același aspect, nu ați vedea niciun spațiu alb. Este un fel de spațiu alb implicit, prezent în HTML, care nu dispare prin setarea marjelor la 0px. În schimb, trebuie să eliminați orice discrepanțe între caractere din marcajul propriu-zis, așa cum se arată în acest stilou:
Acest amestec este o stenogramă pentru scrierea a ceva de genul:
Sass:
Poziția css. a unui element: topul relativ: 0px stânga: 100px
Sass:
"css .some-element + poziție (relativă, 0px 0 0 100px) // sus-jos în partea dreaptă stânga
// sintaxa SCSS .some-element // @ include poziția (relativă, 0px 0 0 100px); "
Asta e. Nici o magie, dar încă super utilă. Păstrarea foilor de stil simple și ușor de citit se pierde în timp.
Doriți să folosiți triunghiuri CSS fără a vă lăsa în jur? Cu siguranță nu este nevoie să folosiți imagini pentru slujbă. Este ușor ca plăcinta cu acest amestec.
Sass:
"css .triangle + triunghi (25px, roșu, în jos) // dimensiune, culoare, direcție
// sintaxă SCSS .triangle @ include triunghi (25px, roșu, jos); // "
Al treilea parametru definește direcția. Opțiunile pentru acest mixin includ:
jossusstângadreapta
up-dreaptasus la stângadreapta-josstanga josPuteți chiar să definiți o a doua culoare dacă aveți nevoie de o culoare de fundal pentru triunghiul dvs..
Containerele care au elemente plutitoare în ele experimentează problema containerului cu înălțimea zero - în esență, elementul recipientului devine la zero pixeli dacă toate elementele sale din interior sunt flotate și scoase din container curgere. În esență, nu mai rămâne nimic să umple containerul.
clearfix mixin are grijă de acest lucru atunci când este aplicat la elementul container / ambalaj. Cel mai bun lucru în acest sens este că nu necesită marcare adițională "goală" pentru a acomoda clarfixul. Păstrează lucrurile semantice, separând preocupările, adăugând clarfixul în foile de stil. Aruncați o privire la acest exemplu foarte simplu:
HTML:
„html
"Sass:" css $ gri-gri: # D4D4D4 .grey-wrapper fundal-culoare: $ light-gri + clearfix .logos float: dreapta + imagine de fundal (url ("[email protected]" ("thoughtbot.png")) poziția fundalului: vârful central, partea stângă sus-repetare: repetare-y, repetare-x înălțime: 220px lățime: 50% // sintaxă SCSS //grey-wrapper @include clearfix; fundal-culoare: $ light-gri; .logos float: right; @ include imaginea de fundal (url ("[email protected]"), url ("thoughtbot.png")); pozitie fundal: centru de sus, partea stanga sus; repeat-repeat-repeat-y, repeat-x; înălțime: 220px; lățime: 50%; !! [fișier] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633234957.jpg) În exemplul de mai sus, containerul gri se extinde pentru a ține apăsat în cazul în care nu este utilizată clarfixul:! [file] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633341703.jpg) Dacă luați o privire la codul sursă devine clar cum funcționează acest * micro clearfix *: Sass: [codul sursă Bourbon] (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_clearfix .scss) "css @mixin clearfix &: după conținut:" "; afișare: tabel; clar: ambele; "Acest mixin utilizează:după pseudo element pentru a plasa un șir gol la celălalt capăt al containerului. În acest sens, acesta imită conținutul după logo și înșală browserul spre extinderea containerului gri pentru a înconjura alte elemente din interior. ## Buton Mixin Aveți nevoie de butoane de înaltă calitate din cutie? ### Butonul standard [fișier] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633769651.png) HTML: "butonul Super duper" html Sass: "css $ albastru-albastru: # 2485F1 .super-duper-buton + buton ($ albastru-albastru) // sintaxa SCSS // super-duper-buton @include buton ($ light-blue) ! Butoane simple și semantic curățate. Ele chiar vin cu efecte minunate de hover subtil. Există și două opțiuni suplimentare: ### Butonul Pill! [File] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633844440.png) HTML: "html Super Dupa ce ati introdus-o pe butonul "Paste", apasati butonul "CSS $ Dark-Pink": # 6B32D1 .Super-Duper Buton + Buton (pastila, $ intuneric roz) roz); // "### Shiny Button! [Fișier] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633895872.png) HTML:" html Super duper buton stralucitor "Sass:" css $ acceptare-verde: # 43C914. Buton super-duper-buton + (stralucitor, acceptare verde) // sintaxa SCSS // buton super-duper verde); // "** Atenție! ** Vă rugăm să rețineți că textul de pe butoane schimbă automat culoarea în funcție de * ușurința * culorii de bază a butonului, astfel încât mixinul oferă un contrast și o lizibilitate mai bună. [fișier] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441634000114.png) Sass: "css $ gri-gri: #DEDEDE .super-duper-button + buton (strălucitor, luminos gri), // sintaxă SCSS // buton super-duper @ include buton (strălucitor, luminos gri); // "## Mărimea Mixin Trebuie vreodată să definiți lăţime și înălţime într-o declarație? Cu Bourbon, iată tot ce trebuie să faceți: Sass: "css .small-article + size (300, 400) // sintaxa SCSS // .comandă @ include size (300, 400); ieșire: "css .small-article width: 300px; height: 400px;" Puteți furniza valori ale pixelilor sau valori numerice. Poți să folosești auto pentru aceste valori, de asemenea. Dacă oferiți doar o singură mărime, Bourbon presupune că doriți un pătrat. Sass: "css .square + dimensiune (25px) // Sintaxa SCSS //.square @ include size (25px); //" ## HiDPI Mixin Dacă doriți să generați rapid interogări media prefixate complet de furnizori pentru detectarea * HiPi * ("Retina") dispozitive, acest mixin vine la îndemână. Începeți prin a furniza un raport de țintă * dispozitiv pixel * și declarații care se schimbă dacă interogarea mass-media intră. Raportul implicit este 1.3. Sass HiDPI-media-query: "css .image width: 150px + hidpi (1.5) latime: 200px // Sintaxa SCSS //.image width: 150px; + hidpi (1.5) width: 200px; Executarea CSS: "css .image width: 150px; numai ecranul @media și (-webkit-min-device-pixel-ratio: 1.5), numai ecran și (min-moz-device-pixel-ratio: 1.5) numai ecran și (min-rezoluție: 1,5dppx) (lățime: 200px; "numai ecran și (-o-min-device-pixel-ratio: 1.5 / Destul de la moda! Slabeste codul repetitiv destul de putin. ## Retina Image Mixin În funcție de densitatea * pixelilor * dispozitivului care afișează desenele dvs., puteți furniza imagini cu rezoluția bitmap corespunzătoare. Acest amestec fin oferă o imagine de fundal * a unei retină sau o imagine de fundal non-retină * în funcție de rezultatul interogării intermediare HiDPI a mixinului care verifică dispozitivul pentru densitatea pixelilor. Dacă nu mă înșel, ca bonus, va servi doar una dintre imagini pentru a evita descărcarea celor două - ceea ce este deosebit de avantajos pentru rețelele celulare. Dacă toate cele de mai sus sunt gobbledygook pentru tine, aș recomanda începând cu acest fantastic [articolul] (http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/) pe Smashing Magazine. Sass: "css.logo + retina-image (logo-icon, 50px, 30px) // sintaxa SCSS // .logo @include retina-image (logo-icon, 50px, 30px); ajută la explicarea funcționalității sale: "css .logo background-image: url (logo-icon.png); numai ecranul @media și (-webkit-min-device-pixel-ratio: 1.3) -moz-device-pixel-ratio: 1.3), doar ecran și (-o-min-device-pixel-ratio: 1.3 / 1), numai ecran și (min-rezoluție: 125dpi) : 1.3dppx) .logo background-image: url (logo-icon_2x.png); dimensiunea fundalului: 50px 30px; raport de 2), precum și dispozitive cu rapoarte de pixeli ca "scăzut" ca 1.3. Acest mixin se așteaptă ca ** ** png ** ca extensie standard pentru toate imaginile. În mod implicit, se așteaptă de asemenea o extensie ** _ 2x.png ** la numele fișierului imaginii retinei. Puteți suprascrie ambele valori implicite prin furnizarea unui alt nume de fișier retină și a unei extensii standard, cum ar fi: Sass: "css .logo + retina-image (logo-icon, 50px, 30px, extensie $ jpg, retina-filename: HiDPI- logo-icon, $ retina-sufix: _retina) // sintaxa SCSS //.logo @ include retina-image (logo-icon, 50px, 30px, extensie $ jpg, $ retina-sufix: _retina); // "CSS output:" css .logo background-image: url (logo-icon.jpg); @media only screen și (-webkit-min- : 1.3), numai ecran și (min-moz-device-pixel-ratio: 1.3), numai ecran și (min-rezoluție: 125dpi), doar ecran și (min-rezoluție: 1.3dpx) .logo background-image: url (HiDPI-logo-icon_retina.jpg); Asta e tot ce vom acoperi în ceea ce privește mixurile Bourbon. În următorul tutorial vom examina funcțiile lui Bourbon.
