Вобласць бачнасці зменных і блокаў кантэнту ў SASS

Пры перадачы блокаў кантэнту ў міксін іх вобласць бачнасці вызначаецца канкрэтным размяшчэннем блока, а не міксіна. Такім чынам, мы не можам выкарыстоўваць лакальныя зменныя міксіна ў які перадаецца блаку кантэнту, які зможа працаваць толькі з глабальнымі зменнымі.

Разгледзім наступны прыклад:

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

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

Вынік кампіляцыі:

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

Задание 1

Раскажыце, якім будзе вынік кампіляцыі наступнага коду:

styles.scss$color: yellow;

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

Задание 2

Раскажыце, якім будзе вынік кампіляцыі наступнага коду:

styles.scss$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;
  }
}

Задание 3

Раскажыце, якім будзе вынік кампіляцыі наступнага коду:

styles.scss$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;
  }
}