Mixins och includes

En mixin i Sass är ett återanvändbart block med CSS-deklarationer. Till skillnad från en vanlig klass kan den ta emot parametrar, vilket gör den mer flexibel än att kopiera och klistra in kod. Definiera den med @mixin och använd den med @include.

En mixin utan parametrar är helt enkelt ett återanvändbart block:

Skicka värden till en mixin för att anpassa resultatet:

Ange standardvärden för mixinargument så att de blir valfria:

Skicka mixinargument med namn för tydlighetens skull:

Mixins kan ta emot ett innehållsblock med hjälp av @content. Det inkluderade blocket infogas där @content förekommer:

En vanlig mixin för media queries:

En mixin för textstilar och en konsekvent typografisk skala:

Mixins matar ut CSS-deklarationer, medan funktioner returnerar ett värde. Använd en mixin när du vill mata ut flera CSS-regler och en funktion när du behöver ett beräknat enskilt värde.

För många mixins skapar abstraktioner med indirekta lager som är svåra att felsöka. Skapa bara en mixin om ett mönster återanvänds minst tre gånger. För engångsstilar skriver du helt enkelt CSS-koden direkt.

Definiera mixins med @mixin och använd dem med @include. Mixins kan ta emot parametrar med valfria standardvärden. @content gör det möjligt för anropare att infoga CSS-block i mixinen — vilket möjliggör omslutande mönster, till exempel hjälpmedel för media queries. Skapa bara mixins för mönster som återanvänds flera gånger, så undviker du kostnaden för onödig abstraktion.