Het gebruik van mixins in SASS

Nadat we een mixin hebben gedeclareerd roepen we deze aan met de directive @include, die verplicht de naam van de mixin moet bevatten. Ook kunnen er optioneel parameters en stijlen in staan. Laten we een voorbeeld bekijken:

@mixin mix{
	width: 100px;
	height: 100px;
}
div {
	@include mix;
	padding: 4px;
	margin-top: 10px;
}

Resultaat van compilatie:

div {
	width: 100px;
	height: 100px;
	padding: 4px;
	margin-top: 10px;
}

Mixins kunnen ook in de root van het document worden aangeroepen, maar alleen in het geval dat ze geen regels beschrijven en er geen verwijzing naar de parent in staat. Zie het volgende voorbeeld:

@mixin active {
	p {
		color: #161618;
		background-color: red;
	}
}
@include active;

Na compilatie zien we:

p {
	color: #161618;
	background-color: red;
}

Vertel wat het resultaat van de compilatie zal zijn van de volgende code:

@mixin font {
	font-family:'Courier New', Courier, monospace;
	font-size: 12px;
}

#product-card {
	@include font;
	color: #090957;
	font-weight: 600px;
}

Vertel wat het resultaat van de compilatie zal zijn van de volgende code:

@mixin style {
	color:#090957;
}

button, link {
	@include style;
	font-size: 10px;
	padding: 4px;
}

Vertel wat het resultaat van de compilatie zal zijn van de volgende code:

@mixin active-text {
	font-size: 14px;
	font-weight: bold;
	text-decoration: underline;
	color: blue;
}

#product-card, .active, .content {
	@include active-text;
	padding: 4px;
}

Vertel wat het resultaat van de compilatie zal zijn van de volgende code:

@mixin size {
	font-size: 14px;
	padding: 10px;
	margin: 4px;
}

@mixin color {
	color: #580909;
	background-color: #e9e5ab;
}

#product-card {
	@include size;
	@include color;
	width: 600px;
}