Область видимости переменных и блоков контента в SASS
При передаче блоков контента в миксин их область видимости определяется конкретным расположением блока, а не миксина. Следовательно, мы не можем использовать локальные переменные миксина в передаваемом блоке контента, который сможет работать только с глобальными переменными.
Рассмотрим следующий пример:
$size: 14px;
@mixin sizes ($size: 20px) {
font-size: $size;
padding: $size;
@content;
}
.navbar {
@include sizes {
margin: $size;
}
}
Результат компиляции:
.navbar {
font-size: 20px;
padding: 20px;
margin: 14px;
}
Расскажите, каким будет результат компиляции следующего кода:
$color: yellow;
@mixin links ($color: red) {
background: $color;
@content;
}
Расскажите, каким будет результат компиляции следующего кода:
$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;
}
}
Расскажите, каким будет результат компиляции следующего кода:
$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;
}
}