Област на видливост на променливите и блокови на содржина во 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;
}
}