de Jason Arnold

Cum se utilizează Sass Mixins și Loops

Relația mea actuală cu Sass continuă și am trecut la nivelul următor. Ceea ce a început ca o cale mai rapidă, mai puțin sintaxică scrie-mi CSS, a devenit acum o relație mult mai angajată.

Suntem gata să experimentăm puțin. Am încercat recent mâna la două dintre cele mai utile caracteristici ale lui Sass, Mixins și Bucle.

Mixini și bucle

Cu Mixins și Loops, liniile se estompează puțin între CSS și un alt limbaj de codare, cum ar fi JavaScript. Când vă gândiți la codul dvs. în ceea ce privește funcțiile pe care le definiți într-un loc și le apelați într-un alt loc, sau bucle care repetă un cod un anumit număr de ori, probabil că nu vă gândiți la CSS. Știu că nu am făcut-o niciodată.

CSS este pentru stil. De ce aș avea nevoie vreodată să fac un loop peste un stil sau să apelez un stil definit în altă parte? Asta nici măcar nu are sens în ceea ce privește CSS. Este total străin. În plus, nu există ceva despresepararea preocupărilor‘(SoC)?

Dar gândindu-ne mai mult la SoC, poate că acest mod are mai mult sens.

CSS ar trebui să se ocupe de stilul site-ului, nu? Deci, de ce am folosit JavaScript .style() metoda sau jQuery .css() metoda de a gestiona acest lucru? De ce nu pot schimba dinamic stilul în CSS?

Ei bine, Sass te apropie cu câțiva pași de asta. Indiferent de partea laterală a gardului SoC pe care te încadrezi, Mixins și Loops în Sass pot economisi ceva timp și efort serios atunci când îți amenajezi site-urile.

Mixins

Voi începe cu Mixins. În termeni simpli, vă puteți gândi la un Mixin ca la o funcție JavaScript pentru CSS. Definiți un Mixin undeva în codul dvs. Sass și îi transmiteți parametrii pe care îi faceți referire în interiorul Mixin. Apoi, altundeva în codul Sass, îl numiți pe Mixin și transmiteți argumente care corespund parametrilor și totul se execută. Confuz? Da, puțin, deci să trecem printr-un exemplu.

Mai întâi definiți un Mixin în Sass. Acest lucru se face cu =. Sintaxa unei definiții Mixin arată astfel (nu uitați că $ este utilizat în Sass pentru a defini variabile):

=mixinName($param1, $param2, $etc)
  Sass code goes here...

Acest Mixin poate fi apelat apoi oriunde în codul dvs. de care aveți nevoie. Și transmiteți argumentele de care Mixin are nevoie și Sass convertește toate acestea în CSS.

Iată un exemplu de Mixin pe care l-am scris pentru a defini o casetă de bază.

=box($height, $width, $backgroundColor)
  height: $height
  width: $width
  background-color: $backgroundColor
  margin-bottom: 5px
  border: 1px solid black

Am definit cei trei parametri ai mei după numele Mixin, în acest caz este box. Apoi am codul Sass, dintre care unele apelează la parametri. Acum pot folosi acest Mixin în altă parte din codul meu Sass ori de câte ori vreau să definesc o casetă cu aceste caracteristici. Pot să-l sun pe Mixin de câte ori vreau, trecând de fiecare dată în argumente diferite. Numiți un Mixin cu + caracter.

.box-1
  +box(100px, 200px, tomato)
  
.box-2
  +box(50px, 100px, rbga(100, 255, 255, 0.5)

Pagina va reda acum aceste proprietăți CSS pe părțile paginii cu .box-1 și .box-2 clase. Iată rezultatul.

Poate fi puțin dezamăgitor cu doar 2 cutii. Dar dacă aveți un site unde trebuie să definiți mai multe articole similare, Mixins vă poate economisi o grămadă de timp. Și dacă trebuie să schimbați sau să adăugați o proprietate la toate acestea, aveți un singur loc unde să mergeți.

Dacă aș vrea să transform aceste cutii în ovale adăugând un border-radius proprietate, o fac doar o dată în Mixin, mai degrabă decât pentru fiecare casetă din CSS-ul meu.

Bucle

A doua caracteristică Sass tratată aici este Loops și sunt exact ceea ce crezi că sunt. Conceptul este același ca în majoritatea celorlalte limbaje de programare. Aveți o bucată de cod care trebuie repetată de mai multe ori.

Sass are și acestea ca opțiuni și sunt numite directivele de control. Încep cu @ simbolul și sintaxa sunt destul de ușor de înțeles. Acestea includ un @if, @for, @each, și @while. Voi acoperi @for aici astăzi, dar puteți citi mai multe despre toate acestea Aici.

@for Directiva de control vine în două opțiuni diferite, to și through Opțiuni. Aceasta se referă la <end> din loop. to este exclusive and tprin intermediul este inclusiv.

Sintaxa pentru through versiunea unui @for bucla este după cum urmează:

@for <$variable> from <start> through <end>
  Sass code goes here...

to versiunea este aceeași. Doar înlocuiți through cu to.

$variable poate fi orice nume doriți să fie. <start>; and valorile ar trebui să fie întregi.

Iată un exemplu pe care l-am scris, care creează 10 divs pe pagină, fiecare mai larg decât ultima și o culoare ușor diferită. Le-am inclus și într-un Mixin, astfel încât să pot transmite parametrii și să-l numesc oriunde am avut nevoie.

=graph($height, $baseColor)
  @for $i from 1 through 10
    .line-#{$i}
      height: $height
      width: 2em * $i
      background-color: rgba($i * ($baseColor + 20), $i *  ($baseColor + 10), $i * ($baseColor + 5), 1)

Aceasta creează 10 selectoare CSS diferite ale .line-1, .line-2, si asa mai departe. Fiecare selector are înălţime specificat de $height, A lăţime de 2em * valoare de i și o culoare de fundal bazată pe $baseColor număr trecut în.

Apoi îl numesc pe Mixin la fel ca oricare altul

+graph(10px, 10)

Și iată rezultatul:

De asemenea, puteți adăuga lucruri precum pseudo-clase CSS la aceste bucle. Iată un alt exemplu cu :hover pseudo clasă.

=stack
  @for $i from 1 through 30
    .stack-#{$i}
    position: absolute
    height: 100px
    width: 100px
    top $i + 10px
    left $i + 10px
    background-color: rgba($i * 1, $i * 2, $i * 3, 1)
    
    &:hover
      background-color: rgba($i * 2, $i * 4, $i * 8, 1)

Numiți acest Mixin așa (nu sunt necesare argumente):

+stack

Bucla va rula o dată când pagina este redată și apoi din nou pe fiecare persoană .stack element atunci când mouse-ul trece deasupra acestuia. Aceasta schimbă culoarea de fundal.

A fost mult mai ușor și mai rapid să scrii acest Mixin cu un @for buclă mai degrabă decât scrierea a 299 de linii de CSS. Și din nou, dacă vreau să schimb ceva pentru toate, o fac o dată în loc de 299 de ori.

Rezultatul este copleșitor, deoarece nu puteți trece pe ecran. Aici este CodePen cu toate exemplele de mai sus.

Acestea sunt doar două dintre instrumentele excelente pe care le oferă Sass. Acestea vă pot ajuta să creați niște CSS funcționale și pline de aspect într-o fracțiune de timp.

Sper că v-a plăcut această postare. Vă rog să-mi spuneți dacă aveți întrebări. Mulțumiri!