Μπλοκ περιεχομένου σε mixins στο SASS

Για τη μετάδοση ενός μπλοκ στυλ μέσα σε ένα mixin χρησιμοποιούμε την οδηγία @content, στη θέση της οποίας θα τοποθετηθούν τα στυλ που χρειαζόμαστε.

Ας δούμε ένα παράδειγμα:

@mixin active {
	* div {
		@content;
	}
}

@include active {
	#block {
		color: red;
	}
}

Αποτέλεσμα μεταγλώττισης:

* div #block {
	color: red; 
}

Είναι απαραίτητο να γνωρίζουμε ότι εάν ορίσουμε την οδηγία @content περισσότερες από μία φορές ή μέσα σε έναν βρόχο, τότε το μπλοκ στυλ θα καλείται τους ίδιους πολλούς φορές.

@mixin active {
	div {
		@content;
	}
navbar {
		@content;
	}
}
@include active {
	#block {
		color: red;
	}
	button {
		color:green;
	}
}

Μετά τη μεταγλώττιση θα δούμε:

div #block {
	color: red; 
}
div button {
	color: green; 
}

navbar #block {
	color: red; 
}
navbar button {
	color: green; 
}

Πείτε μας ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

@mixin super-link {
	a {
		@content;
	}
}
@include super-link {
	color: blue;
	text-decoration: underline;
}

Πείτε μας ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:

@mixin super-link {
	a {
		@content;
	}
	a .primary-link{
		@content;
		font-weight: bold;
	}
}
@include super-link {
	color: blue;
	text-decoration: underline;
}

Ας υποθέσουμε ότι έχετε το ακόλουθο mixin:

@mixin colors {
	...
}

Χρησιμοποιώντας την οδηγία @content ορίστε για όλους τους συνδέσμους που ανήκουν στο #primary μπλε χρώμα γραμματοσειράς και υπογράμμιση με κύμα.