Scope of variables and content blocks in SASS

When passing content blocks to a mixin, their scope is determined by the specific location of the block, not the mixin. Therefore, we cannot use local variables of the mixin in the passed content block, which will only be able to work with global variables.

Let's consider the following example:

$size: 14px;
	@mixin sizes ($size: 20px) {
		font-size: $size;
		padding: $size;
		@content;
}

.navbar {
	@include sizes {
		margin: $size;
	}
}

Compilation result:

.navbar {
	font-size: 20px;
	padding: 20px;
	margin: 14px; 
}

Tell me what the result of compiling the following code will be:

$color: yellow;

@mixin links ($color: red) {
	background: $color;
	@content;
}

Tell me what the result of compiling the following code will be:

$color: yellow;
$size: 10px;

@mixin links ($color: red, $size: 12px) {
	background-color: $color;
	font-size: $size;
	@content;
}

.navbar {
	@include links {
		box-shadow: $color;
		padding: $size;
	}
}

Tell me what the result of compiling the following code will be:

$color: green;
$size: 6px;

@mixin links ($color: red, $size: 10px) {
	color: $color;
	font-size: $size;
	@content;
}

.navbar {
	@include links {
		border-color: $color;
		margin: $size;
	}
}

#active{
	@include links{
		background-color: $color;
		padding-top: $size;
		padding-bottom: $size * 2;
	}
}