A Sass Mixins és Loops használata

A jelenlegi szerelmi kapcsolatom Sassszal folytatódik, és átmentük a következő szintre. Ami a CSS megírásának gyorsabb, kevésbé szintaxisos módjának indult, mára sokkal elkötelezettebbé vált.

Készen állunk egy kis kísérletezésre. Nemrégiben kipróbáltam a Sass két leghasznosabb funkcióját, a Mixins és a Loops szolgáltatásokat .

Mixins és Loops

A Mixins és Loops segítségével a vonalak kissé elmosódnak a CSS és egy másik kódoló nyelv, például a JavaScript között. Ha belegondol a kódjába az egyik helyen definiált és a másikban meghívott funkciók, vagy a ciklusok között, amelyek egy darabon keresztül többször ismételgetik a kódot, valószínűleg nem a CSS-re gondol. Tudom, hogy soha nem tettem.

A CSS a stílus. Miért kellene valaha is áttekintenem egy stílust, vagy valahol máshol definiált stílust kellene hívnom? Ennek még a CSS szempontjából sincs értelme. Teljesen idegen. Ráadásul nincs valami az „aggodalmak elkülönítésében” (SoC)?

De jobban gondolva a SoC-re, talán így van értelme.

A CSS-nek kezelnie kell a webhely stílusát, igaz? Szóval, miért használtam a JavaScript .style()vagy a jQuery .css()módszerét ennek kezelésére? Miért nem változtathatom meg dinamikusan a CSS belső stílusát?

Nos, Sass pár lépéssel közelebb visz ehhez. Bármelyik oldalra esik is a SoC kerítés, a Sass-ban található Mixins és Loops komoly időt és erőfeszítést takaríthat meg a webhelyek stílusának kialakításakor.

Mixins

Mixinsszel kezdem. A legegyszerűbben kifejezve gondolhat egy olyan Mixinre, mint a CSS JavaScript funkciója. Megadhat egy Mixint valahol a Sass kódodban, és átadod neki a Mixinben hivatkozott paramétereket. Ezután valahol másutt a Sass-kódban felhívja azt a Mixint, és argumentumokat ad át, amelyek megfelelnek a paramétereknek, és az egész lefut. Zavaró? Igen, egy kicsit, szóval engedjünk át egy példát.

Először definiál egy Mixint a Sass-ban. Ez azzal történik =. A Mixin definíciójának szintaxisa a következőképpen néz ki (ne feledje, hogy a $Sass-ban a változókat definiálják):

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

Ez a Mixin ekkor bárhol máshol hívható a kódban, ahol szüksége van rá. És átadja azokat az érveket, amelyekre a Mixinnek szüksége van, és Sass mindezt CSS-vé alakítja.

Itt van egy példa egy Mixin-re, amelyet egy alapdoboz definiálásához írtam.

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

Három paraméteremet definiáltam a Mixin neve után, ebben az esetben az box. Aztán megvan a Sass kódom, amelyek közül néhány meghívja a paramétereket. Most már használhatom ezt a Mixint máshol a Sass-kódomban, valahányszor szeretnék meghatározni egy ilyen tulajdonságokkal rendelkező dobozt. A Mixint annyiszor hívhatom, ahányszor csak akarok, minden alkalommal más és más érveket közölve. Mixint hívsz a +karakterrel.

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

Az oldal ezeket a CSS tulajdonságokat az oldal azon részeire rendereli, amelyek a .box-1és .box-2osztályokkal rendelkeznek. Itt az eredmény.

Lehet, hogy kissé lehengerlő, csak 2 doboz. De ha van olyan webhelye, ahol több hasonló elemet is meg kell határoznia, akkor a Mixins rengeteg időt takaríthat meg Önnek. És ha mindezekhez módosítania vagy hozzá kell adnia egy tulajdonságot, akkor csak egy helye van.

Ha egy border-radius tulajdonság hozzáadásával ezeket a dobozokat oválissá akartam tenni, akkor egyszer csak a Mixinben csinálom, nem pedig a CSS-m minden egyes dobozához.

Hurkok

A második itt tárgyalt Sass funkció a Hurok, és pontosan olyanok, amilyennek gondolod őket. A koncepció megegyezik a legtöbb más programozási nyelvvel. Van egy darab kódja, amelyet bizonyos számú alkalommal ismételni kell.

A Sassnak ezek is opciók, és ezeket irányítási irányelveknek hívják . A @szimbólummal kezdődnek, és a szintaxis elég könnyen érthető. Ezek közé tartozik a @if, @for, @each, és @while. Fedezlek a @forma itt, de akkor többet megtudni az összes ilyen van.

Az @forellenőrzési irányelv kétféle különböző lehetőségeket, a toés a throughlehetőségeket. Ez a nd> of the loop. to is exclusiv e and through is inclusive.

The syntax for the through version of an @for loop is as follows:

@for from through Sass code goes here...

The to version is the same. Just replace through with to.

The $variable can be whatever name you want it to be. The rt> ; and values should be integers.

Here is an example I wrote that creates 10 divs on the page, each wider than the last and a slightly different color. I also included them in a Mixin so I could pass in parameters and call it wherever I needed to.

=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)

This is creating 10 different CSS selectors of .line-1, .line-2, and so forth. Each selector has the height specified by $height, a width of 2em * the value of i and a background color based on the $baseColornumber passed in.

I then call this Mixin just like any other

+graph(10px, 10)

And here is the result:

You can also add things like CSS pseudo classes to these loops. Here is another example with the :hover pseudo class.

=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)

Call this Mixin like so (no arguments needed):

+stack

The loop will run once when the page renders and then again on each individual .stack element when the mouse hovers over it. This changes the background color.

It was much easier and faster to write this Mixin with an @for loop rather than writing out 299 lines of CSS. And again, if I want to change something for all of them I do it once instead of 299 times.

The result is underwhelming since you can’t hover on the screenshot. Here is a CodePen with all the above examples.

These are only two of the great tools that Sass offers. They can help you create some great looking and functional CSS in a fraction of the time.

I hope you enjoyed this post. Please let me know if you have any questions. Thanks!