Muutujate ja sisublokkide nähtavuspiirkond SASS-is
Sisublokkide edastamisel miksisse määratakse nende nähtavuspiirkond bloki konkreetse asukoha järgi, mitte miksi järgi. Seetõttu ei saa me kasutada miksi lokaalseid muutujaid edastatavas sisublokis, mis saab töötada ainult globaalsete muutujatega.
Vaatleme järgmist näidet:
$size: 14px;
@mixin sizes ($size: 20px) {
font-size: $size;
padding: $size;
@content;
}
.navbar {
@include sizes {
margin: $size;
}
}
Kompileerimise tulemus:
.navbar {
font-size: 20px;
padding: 20px;
margin: 14px;
}
Rääkige, milline on kompileerimise tulemus järgnevast koodist:
$color: yellow;
@mixin links ($color: red) {
background: $color;
@content;
}
Rääkige, milline on kompileerimise tulemus järgnevast koodist:
$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;
}
}
Rääkige, milline on kompileerimise tulemus järgnevast koodist:
$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;
}
}