Meer DRY in je stylesheet: SASS in the mix(in)

-

In een eerder blog schreef ik al over hoe goed gebruik van SASS ervoor kan zorgen dat je CSS code DRY (Don’t Repeat Yourself) kunt houden. Maar behalve de al eerder besproken for en each loops zitten er nog tal van andere handige en krachtige mogelijkheden in SASS.

Eén van mijn (en van waarschijnlijk veel frontend developers met mij) favorieten en waarschijnlijk de meest toegepaste functie van SASS zijn de mixins: stukjes css code die door je hele CSS hergebruikt kunnen worden.

Vooral wanneer je wat verder in een project zit, zal je steeds regelmatig een deja-vu gevoel krijgen wanneer je CSS zitten schrijven. Wéér een blok met een padding van 20 pixels en weer een 1 pixel border, alleen nu is deze blauw en niet rood… Dit is een ideale situatie om een mixin toe te passen. Want door het toevoegen van argumenten aan je mixins, wordt het pas echt interessant.

Argumenten

Een simpel voorbeeldje is voor de eerder omschreven situatie zal de volgende mixin opleveren:

[code lang=”css”]
@mixin example-box($color) {
border: 1px solid $color;
padding: 20px;
}

.box { @include example-box(blue); }
[/code]

Deze code zal door SASS gecompileerd worden (dit kun je testen op bijvoorbeeld sassmeister.com) in de volgende CSS:

[code lang=”css”]
.box {
border: 1px solid blue;
padding: 20px;
}
[/code]

De mixin kun je zo vaak hergebruiken als dat je wilt. En wanneer de padding van alle div’s 24 in plaats van 20 pixels moet zijn, dan hoef je dit nog maar op één plaats te doen.

Uiteraard kan een mixin met meerdere argumenten aangeroepen worden. Wil je de padding ook variabel houden, dan zou je de mixin aan kunnen passen naar:

[code lang=”css”]
@mixin example-box($padding, $color) {
border: 1px solid $color;
padding: $padding;
}
[/code]

Deze aangepaste mixin kan gebruikt worden met de volgende code:

[code lang=”css”]
.box { @include example-box(20px, blue); }
[/code]

Standaard waardes

Argumenten kunnen in de mixin al voorzien worden van een standaard waarde. Wil je de border uit het eerdere voorbeeld standaard rood hebben, dan kan het eerste gedeelte van de mixin aangepast worden naar:

[code lang=”css”]
@mixin example-box($padding, $color: red);
[/code]

De mixin aanroepen met alleen een aparte padding kan dan op de volgende manier:

[code lang=”css”]
.box { @include example-box(20px); }
[/code]

Variabel aantal argumenten

Zoals je als doorgewinterde frontender weet: een padding kan meerdere waardes bevatten. Geen paniek, ook hier is aan gedacht in SASS. De … notatie zorgt ervoor dat er meerdere waardes aan een argument gegeven kan worden:

[code lang=”css”]
@mixin example-box($color, $padding…){
padding: $padding;
border-color: $color;
}

.box { @include example-box(blue, 20px 10px 20px 30px); }
[/code]

Zal resulteren in:

[code lang=”css”]
.box {
padding: 20px 10px 20px 30px;
border-color: blue;
}
[/code]

@Content en breakpoints

Nu is een box met een border en wat padding natuurlijk een simpel voorbeeld van mixins. Je kunt ze natuurlijk zo uitgebreid maken als dat je wilt. Een nog wat mooier, krachtiger voorbeeld van mixins gebruik is die voor mediaqueries bij een repsonsive project.

[code lang=”css”]
@mixin breakpoint($point) {
@if $point == desktop {
@media (min-width: 70em) { @content ; }
}
@else if $point == tablet {
@media (min-width: 50em) { @content ; }
}
@else if $point == mobileonly {
@media (max-width: 37.5em) { @content ; }
}
}
[/code]

Deze mixin verwacht één argument ($point) waarmee je het type device mee benoemt.. Vervolgens wordt er met de @if directive gekeken wat voor device er is opgegeven en welke CSS gegenereerd moet worden. Als laatste biedt de @content directive je de mogelijkheid om een stuk (extra) code mee te geven aan de mixin.

Door gebruik te maken van bovenstaande mixin wordt het schrijven van een responsive frontend weer een stukje makkelijker:

[code lang=”css”]
.grid-1-4 {
width: 100%;
@include breakpoint(desktop) {
width: 50%;
}
@include breakpoint(tablet) {
width: 25%;
}
}
[/code]

Zal resulteren in de volgende CSS:

[code lang=”css”]
.grid-1-4 {
width: 100%;
}

@media(min-width: 70em) {
.grid-1-4 { width: 50%; }
}

@media (min-width: 50em) {
.grid-1-4 { width: 25%; }
}
[/code]

Zoals je ziet: SASS mixins bieden je een krachtige manier om stukken code op een goede en flexibele manier te herbruiken. Je bent het vast met me eens: je kunt je tijd beter besteden aan het schrijven van toffe nieuwe CSS zaken, dan dat je voor de tiende keer weer een blok met padding aan het maken bent…

Bron afbeelding: Stephen Niemeier