Sass Mixins: Păstrați-vă foile de stil USCATE

Unul dintre beneficiile mele preferate ale utilizării Sass este că face automatizarea fluxului de lucru de proiectare frontală o simplă. Există multe instrumente JavaScript pentru a lucra cu fișiere și pentru a automatiza alte sarcini, dar capabilitățile de mixin încorporate ale Sass permit să scrie cod modular de tip front-end. În acest articol, am enumerat zece dintre mixurile mele preferate Sass pentru automatizarea scrierii stilurilor web.

Acestea sunt mixurile Sass pe care le folosesc pentru aproape fiecare proiect web la care lucrez. Există multe articole interesante cu câteva mix-uri utile Sass pe tot web. Există, de asemenea, câteva biblioteci bune de mixin Sass, care sunt grozave pentru sarcini mai mici, cum ar fi Bourbon. O altă bibliotecă de mixine grozavă din care am derivat unele dintre mixurile de mai jos este Andy.

Mixurile pe care le voi trece în acest articol se ocupă de următoarele:

• Interogări media
• Teme de culoare
• Elemente de centrare
• Clearfix
• Dimensiuni constante ale fontului
• Tranziții de animație
• Imaginile retinei
• Degrade rapide
• Fonturi externe
• Umplutură/margini rapide

Interogări media

Interogările media vă permit să adăugați cu ușurință puncte de întrerupere personalizate la foile de stil și să adăugați rapid un comportament personalizat de răspuns într-un element pentru diferite puncte de întrerupere. Cu toate acestea, interogările media din foile de stil care împrăștie pot deveni rapid un motiv de dureri de cap, mai ales când vine vorba de menținerea lor pe drum. Cu mixin-urile Sass, totul se poate schimba.

 $breakpoint-small: 600px; $breakpoint-med-small: 960px; $breakpoint-med: 1175px; @mixin screen($size, $type: max, $pixels: $breakpoint-small) { @if $size == 'small' { @media screen and ($type + -width: $breakpoint-small) { @content; } } @else if $size == 'med-small' { @media screen and ($type + -width: $breakpoint-med-small) { @content; } } @else if $size == 'med' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'large' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'custom' { @media screen and ($type + -width: $pixels + px) { @content; } } @else { @content; } }

Cu acestea definite, mixinele pot fi utilizate după cum urmează:

 .foo { @include screen(large) { width: 20%; } @include screen(med) { width: 40%; } @include screen(med-small) { width: 60%; } @include screen(small) { width: 80%; } @include screen(custom, max, 400) { width: 100%; } }

Funcționează grozav de sine stătător sau cu alte cadre de grilă, cum ar fi Bootstrap.

Declarația if va emite o interogare media ajustată la o anumită dimensiune a ecranului, în funcție de numele dimensiunii furnizat mixin-ului. Acest lucru vă va permite să ajustați cu ușurință comportamentul atributelor dvs. CSS în consecință. De asemenea, puteți personaliza punctul în care doriți să ajustați atributele CSS. De obicei, cele mai receptive machete vor rămâne cu 3 sau 4 dimensiuni definite pentru lățimea ecranului pentru a ajusta conținutul. Variația dimensiunilor ecranului, dispozitivelor și aplicațiilor este în continuă expansiune, dar există o tendință populară pe care mulți dezvoltatori web o vor folosi pentru aspectul lor; ecran de dimensiuni mici pentru telefoane, mediu pentru tablete, mare pentru laptopuri și foarte mare pentru computere desktop.

Pentru referință, punctele media utilizate în Bootstrap v3 sunt:

• lățime maximă: 767 px (orice ecran cu lățime de până la 767 px)
• lățime minimă: 768 px (orice ecran cu lățime mai mare de 768 px)
• lățime minimă: 992 px (orice ecran cu lățime mai mare de 992 px)
• lățime minimă: 1200 px (orice ecran cu lățime mai mare de 1200 px)

Teme de culoare

Definirea unei teme de culoare pe care să o utilizați pe site-ul dvs. vă ajută să economisiți timp pentru a avea aceleași porțiuni colorate de CSS pe aceleași elemente HTML. Dacă doriți ca toate butoanele dvs. div să aibă un chenar punctat solid de 1px, atunci puteți adăuga cu ușurință acest lucru la tema dvs. Acest mixin Sass vă va permite să setați câte variabile de culoare doriți și să afectați câte clase doriți. Acesta poate fi un instrument util pentru a oferi opțiuni de culoare pentru ceva sau oricând aveți o caracteristică care afectează culoarea mai multor elemente simultan. Există un articol grozav aici cu mai multe informații despre lucrul cu teme de culoare în Sass.

 @mixin theme($name, $color) { // Define colors in your theme $primary: $color; $secondary: lighten(adjust-hue($color, 20), 10%); // Add your classes with css colors added .#{$name} { .element { color: $primary; } .other-element { background: $secondary; } } }

Odată ce ați configurat o temă de culoare în profunzime, veți elimina 70% din stilul legat de culoare dacă este făcut corect. De asemenea, aș recomanda să separați acest fișier .scss de celelalte fișiere .scss și să includeți toate variabilele de culoare ale mărcii în același fișier.

O linie la fel de simplă ca:

 @include theme(theme-banana, yellow);

va emite:

 .theme-banana .element { color: yellow; } .theme-banana .other-element { background: #bbff33; }

Elemente de centrare

În funcție de aspectul dvs., există multe moduri diferite de a centra alinierea unui element în stilurile dvs. Metoda de mai jos folosește poziționarea absolută și vă va permite să definiți elemente verticale, orizontale sau ambele centrate. Elementul părinte va trebui să aibă poziția: relativă. Acest lucru vă permite să definiți cu ușurință poziția centrată a unui element într-un scurt 2 linii de cod.

 @mixin center($position) { position: absolute; @if $position == 'vertical' { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @else if $position == 'horizontal' { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translate(-50%); } @else if $position == 'both' { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }

 .foo { @include center(both); } .foo-parent { position: relative; }

Acest mixin este una dintre cele mai versatile moduri de a centra conținutul, dar merită remarcat faptul că există multe moduri diferite de a vă centra conținutul, iar aceasta ar putea să nu fie întotdeauna cea mai bună soluție. În funcție de stilul dvs. de aspect și de compatibilitatea cu browserul, este posibil să doriți să vă centrați conținutul într-un mod diferit. Flexbox este un alt instrument popular și foarte util pentru aliniere, deși în prezent nu este pe deplin acceptat de browserele vechi. Alinierea simplă a textului și a containerului se poate face cu ușurință fără acest mixin, folosind proprietăți simple CSS. Acesta vă va ajuta mai mult atunci când creați machete și lucrați cu containere în interiorul altor containere.

Clearfix

Aplicați proprietatea clearfix css rapid și eficient elementelor. Există o mulțime de soluții clearfix pe web, iar aceasta pare să funcționeze cel mai bine. De asemenea, este ușor de utilizat odată ce mixin-ul Sass este creat.

Acest mixin va beneficia ori de câte ori aveți conținut care plutește la dreapta sau la stânga și doriți să goliți spațiul de sub elementul flotant pentru a insera conținut nou mai jos.

 %clearfix { *zoom: 1; &:before, &:after { content: " "; display: table; } &:after { clear: both; } }

 .container-with-floated-children { @extend %clearfix; }

Dimensiuni consistente ale fontului

Setați o dimensiune de font rem în documentul dvs., pe care să o utilizați pentru toate elementele de text. Aceasta este o modalitate mai bună de a mări și reduce fonturile în loc de ele. Utilizarea em se va combina pe baza celorlalte atribute CSS, dar rem se va scala doar în sus sau în jos în funcție de dimensiunea pe care o definiți în documentul HTML. Separarea unui fișier .scss pentru toate tipurile de tipografie și utilizarea mixin-ului de mai jos pentru a defini dimensiunile implicite ale fontului va automatiza drastic fluxul de lucru de codare a tipografiei.

 @function calculateRem($size) { $remSize: $size / 16px; @return $remSize * 1rem; } @mixin font-size($size) { font-size: $size; font-size: calculateRem($size); }

 p { @include font-size(14px) }

Acest mixin creează, de asemenea, un pixel de rezervă pentru browserele care nu acceptă rem (IE8 și mai jos). Când browserul nu acceptă dimensionarea rem, mixin-ul va calcula echivalentul în pixeli al mărimii rem inițiale pe care o setați și va afișa atât valorile pixelilor, cât și ale rem pentru un element.

Animaţie

Definiți rapid proprietățile animației și adăugați-le elementelor dvs. În prezent, proprietatea CSS de animație mai are nevoie de prefixe de furnizor, așa că acest lucru va adăuga și asta la mix.

 @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; } @-moz-keyframes #{$animation-name} { @content; } @-ms-keyframes #{$animation-name} { @content; } @-o-keyframes #{$animation-name} { @content; } @keyframes #{$animation-name} { @content; } } @mixin animation($str) { -webkit-animation: #{$str}; -moz-animation: #{$str}; -ms-animation: #{$str}; -o-animation: #{$str}; animation: #{$str}; }

Prima parte a mixin-ului va adăuga prefixele de furnizor adecvate necesare pentru compatibilitatea browserului. Următoarea secțiune îl setează pentru a introduce șirurile și proprietățile dvs. personalizate. Secțiunea finală a mixin-ului este locul în care ați crea numele mixin-ului (în acest caz: fade-out) și ați defini ceea ce doriți să se întâmple la fiecare cadru cheie din animație. Acest exemplu de configurare este foarte simplu și puteți adăuga modificări la orice procent din durata animației.

 // Define animation name, and properties @include keyframes(fade-out) { 0% { opacity: 1; } 90% { opacity: 0; } } // Add animation to element .element { width: 100px; height: 100px; background: black; @include animation('fade-out 5s 3'); }

Exemplul de aici va lua elementul vizat la 0% din animație (început) și va trece proprietatea de la opacitatea completă (opacitate: 1;) la a nu avea opacitate și, în esență, va dispărea (opacitate: 0;) la 90% din animație. . Deci, dacă am setat animația să aibă o cronologie de 5 secunde, elementul va dispărea după 4,5 secunde (90% din animația de 5 secunde). Ultima proprietate pe care o definesc în utilizarea mixin-ului („3”) este de câte ori se va repeta animația.

Imagini Retina

Adăugați imagini de înaltă rezoluție pe site-ul dvs., cu o rezervă pentru dispozitivele care nu afișează imagini de înaltă rezoluție. Când utilizați imagini retină, aș recomanda comprimarea cât mai mult posibil fără a distruge imaginea. Un instrument bun pentru aceasta este TinyPNG (suporta PNG și JPG).

 @mixin image-2x($image, $width, $height) { @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { background-image: url($image); background-size: $width $height; } }

Acest mixin vă va permite să adăugați o regulă în același loc cu proprietatea CSS care definește imaginea originală.

 div.logo { background: url("logo.png") no-repeat; @include image-2x("logo2x.png", 100px, 25px); }

Anterior, singura soluție CSS pentru aceasta era utilizarea interogărilor media, iar această soluție este mult mai curată și mai ușoară. Pentru mai multe gânduri și idei despre acest mixin, consultați acest articol.

Gradiente rapide

Adăugați cu ușurință degrade, definind doar culoarea de început, culoarea de final și tipul de gradient. Adăugați toate proprietățile gradientului și puteți alege după cum este necesar. Tipul de gradient vă permite să alegeți dintre un gradient vertical, un gradient orizontal sau un gradient radial (în formă de sferă).

 @mixin background-gradient($start-color, $end-color, $orientation) { background: $start-color; @if $orientation == 'vertical' { background: -webkit-linear-gradient(top, $start-color, $end-color); background: linear-gradient(to bottom, $start-color, $end-color); } @else if $orientation == 'horizontal' { background: -webkit-linear-gradient(left, $start-color, $end-color); background: linear-gradient(to right, $start-color, $end-color); } @else { background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color); background: radial-gradient(ellipse at center, $start-color, $end-color); } }

Nu va mai trebui să vă amintiți diferitele prefixe ale furnizorilor și comenzile parametrilor pentru implementarea gradienților.

 .foo { @include background-gradient(red, black, 'vertical'); }

Fonturi externe

Folosind proprietatea CSS font-face, putem adăuga cu ușurință fonturi într-un director și include toate tipurile de fonturi. Când utilizați fișiere cu fonturi, diferite browsere au compatibilitate diferită cu tipurile de fișiere. Acest mixin ajută la rezolvarea asta prin utilizarea oricărui fișier de font relevant dintr-un director.

Pur și simplu includeți orice fișiere de font într-un director și adăugați eticheta „@include” în stilurile dvs., care va prelua toate fișierele din folderul ales.

 @mixin font-face($font-name, $file-name, $weight: normal, $style: normal) { @font-face { font-family: quote($font-name); src: url($file-name + '.eot'); src: url($file-name + '.eot?#iefix') format('embedded-opentype'), url($file-name + '.woff') format('woff'), url($file-name + '.ttf') format('truetype'), url($file-name + '.svg##{$font-name}') format('svg'); font-weight: $weight; font-style: $style; } }

Această combinație va avea grijă să definească adrese URL cu format de font alternativ, inclusiv soluții ciudate necesare pentru compatibilitatea cu versiunile inverse.

Umplutură rapidă și marje

Motivul principal pentru care folosesc acest lucru este că voi omite o anumită proprietate de umplutură, cum ar fi padding-left uneori, și nu vreau să o definesc. Folosind proprietatea Sass null, puteți omite proprietățile de umplutură. Aceleași reguli se aplică și pentru marje.

 //Padding mixin @mixin padding($top, $right, $bottom, $left) { padding-top: $top; padding-right: $right; padding-bottom: $bottom; padding-left: $left; } //Margin mixin @mixin margin($top, $right, $bottom, $left) { margin-top: $top; margin-right: $right; margin-bottom: $bottom; margin-left: $left; }

Amestecarea poate fi apoi folosită pentru a înlocui o grămadă de proprietăți de umplutură-* și margine-* în foile de stil. Puteți include rapid acest mixin în orice element și puteți defini doar părțile laterale ale umpluturii/marjelor pe care doriți să le includeți. Umplutura și marginile sunt unul dintre cele mai utilizate stiluri CSS adăugate elementelor, iar un mic economisire de timp ca acesta se va adăuga rapid.

 // Usage definition @include padding(top, right, bottom, left); @include margin(top, right, bottom, left); // Usage 1 @include padding(1px, 2px, 3px, 4px,); @include margin(1px, 2px, 3px, 4px); // Output 1 // padding: 1px 2px 3px 4px; // margin: 1px 2px 3px 4px; // Usage 2 (with null properties) @include padding(1px, null, 3px, 4px); @include margin(1px, 2px, null, 4px); // Output 2 // padding-top: 1px; // padding-bottom: 3px; // padding-left: 4px; // margin-top: 1px; // margin-right: 2px; // margin-left: 4px;

Învelire

Utilizarea mixin-urilor Sass precum cele prezentate în acest articol este o modalitate excelentă de a vă eficientiza fluxul de lucru. Aceste mixuri specifice vă vor ajuta să petreceți mai puțin timp pe sarcini web obișnuite, oferindu-vă mai mult timp pentru a vă concentra asupra altor aspecte ale proiectului care necesită o perspectivă mai atentă și mai pricepută.

Instalarea și lucrul cu Sass se poate face în mai multe moduri și va implica utilizarea promptului de comandă pentru a instala unele biblioteci în proiectul dvs. O modalitate de a instala Sass este să utilizați Ruby - așa cum este subliniat pe site-ul principal Sass aici - și o altă modalitate populară este să utilizați Node.js.

Beneficiile Sass se extind dincolo de automatizare și vă pot ajuta să creați și să gestionați cu ușurință foile de stil pentru proiect. Chiar și unele dintre cele mai de bază proiecte web pot avea mii de linii de cod CSS. Sass este o modalitate excelentă de a împărți acest cod în bucăți mai ușor de gestionat, fiecare având propriul accent.