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 <e
nd> din lo
op. to este exclusive and t
prin 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. <sta
rt>; and
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!
#Cum #utilizează #Sass #Mixins #și #Loops
Cum se utilizează Sass Mixins și Loops