Die gebied van sigbaarheid van veranderlikes en inhoudblokke in SASS
Wanneer inhoudblokke na 'n mixin oorgedra word, word hul sigbaarheidsgebied bepaal deur die spesifieke ligging van die blok, en nie deur die mixin nie. Gevolglik kan ons nie die lokale veranderlikes van die mixin in die oorgedraagde inhoudblok gebruik nie, wat slegs sal kan werk met globale veranderlikes.
Beskou die volgende voorbeeld:
$size: 14px;
@mixin sizes ($size: 20px) {
font-size: $size;
padding: $size;
@content;
}
.navbar {
@include sizes {
margin: $size;
}
}
Die resultaat van kompilering:
.navbar {
font-size: 20px;
padding: 20px;
margin: 14px;
}
Vertel watter die resultaat van kompilering van die volgende kode sal wees:
$color: yellow;
@mixin links ($color: red) {
background: $color;
@content;
}
Vertel watter die resultaat van kompilering van die volgende kode sal wees:
$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;
}
}
Vertel watter die resultaat van kompilering van die volgende kode sal wees:
$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;
}
}