Sådan bruges Sass Mixins og Loops

Min nuværende kærlighedsaffære med Sass fortsætter, og vi har taget det til næste niveau. Hvad der startede som en hurtigere, mindre syntaksisk måde at skrive min CSS på, er nu vokset til et meget mere engageret forhold.

Vi er klar til at eksperimentere lidt. Jeg har for nylig prøvet min hånd på to af Sass mest nyttige funktioner, Mixins og Loops .

Mixins og loops

Med Mixins og Loops bliver linjerne slørede en smule mellem CSS og et andet kodningssprog som JavaScript. Når du tænker på din kode med hensyn til funktioner, som du definerer ét sted og kalder på et andet, eller sløjfer, der gentager en kode et bestemt antal gange, tænker du sandsynligvis ikke på CSS. Jeg ved, at jeg aldrig gjorde det.

CSS er til styling. Hvorfor skulle jeg nogensinde have brug for at løbe over en stil eller kalde en stil, der er defineret et andet sted? Det giver ikke engang mening med hensyn til CSS. Det er helt fremmed. Plus, er der ikke noget ved 'adskillelse af bekymringer' (SoC)?

Men at tænke mere på SoC, måske giver denne måde mere mening.

CSS skal håndtere webstedets styling, ikke? Så hvorfor har jeg brugt JavaScript- .style()metoden eller jQuerys .css()metode til at håndtere dette? Hvorfor kan jeg ikke ændre styling dynamisk inde i CSS?

Nå, Sass får dig et par skridt tættere på det. Uanset hvilken side af SoC-hegnet du falder på, kan Mixins og Loops i Sass spare dig tid og kræfter, når du styler dine websteder.

Mixins

Jeg starter med Mixins. I de enkleste termer kan du tænke på en Mixin som en JavaScript-funktion til CSS. Du definerer en Mixin et eller andet sted i din Sass-kode og sender den parametre, som du refererer inde i Mixin. Derefter kalder du det andet sted i Sass-koden Mixin og sender argumenter, der svarer til parametrene, og det hele bliver kørt. Forvirrende? Ja, lidt, så lad os gå igennem et eksempel.

Først definerer du en Mixin i Sass. Dette gøres med =. Syntaksen for en Mixin-definition ser sådan ud (husk at den $bruges i Sass til at definere variabler):

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

Denne Mixin kan derefter kaldes andre steder i din kode, som du har brug for den. Og du sender de argumenter, som Mixin har brug for, og Sass konverterer alt dette til CSS.

Her er et eksempel på en Mixin, som jeg skrev for at definere en grundlæggende boks.

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

Jeg har defineret mine tre parametre efter navnet på Mixin, i dette tilfælde er det box. Så har jeg Sass-kode, hvoraf nogle kalder på parametrene. Jeg kan nu bruge denne Mixin andre steder i min Sass-kode, når jeg vil definere en boks med disse egenskaber. Jeg kan ringe til Mixin så mange gange som jeg vil og videregive forskellige argumenter hver gang. Du kalder en Mixin med +karakteren.

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

Siden gengiver nu disse CSS-egenskaber på de dele af siden med .box-1og .box-2klasser. Her er resultatet.

Det kan være lidt overvældende med kun 2 kasser. Men hvis du har et sted, hvor du skal definere flere lignende emner, kan Mixins spare dig masser af tid. Og hvis du har brug for at ændre eller tilføje en ejendom til alle disse, har du kun ét sted at gå.

Hvis jeg ville gøre disse kasser til ovaler ved at tilføje en border-radius egenskab, gør jeg det bare en gang i Mixin snarere end for hver kasse i min CSS.

Sløjfer

Den anden Sass-funktion, der er dækket her, er Loops, og de er præcis, hvad du tror, ​​de er. Konceptet er det samme som i de fleste andre programmeringssprog. Du har et stykke kode, der skal gentages over et bestemt antal gange.

Sass har disse også som valgmuligheder, og de kaldes kontroldirektiver . De starter med @symbolet, og syntaksen er ret let at forstå. Disse indbefatter en @if, @for, @each, og @while. Jeg dækker @forher i dag, men du kan læse mere om alle disse her.

Den @fordirektiv kontrol kommer i to forskellige muligheder, den toog throughmuligheder. Dette er en henvisning til 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!