Bereik van variabelen en content blocks in SASS

Bij het doorgeven van content blocks aan een mixin wordt hun bereik bepaald door de specifieke locatie van het block, niet door de mixin. Daarom kunnen we geen gebruik maken van lokale variabelen van de mixin in het doorgegeven content block, dat alleen zal werken met globale variabelen.

Laten we het volgende voorbeeld bekijken:

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

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

Compilatieresultaat:

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

Задание 1

Vertel wat het compilatieresultaat zal zijn van de volgende code:

styles.scss$color: yellow;

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

Задание 2

Vertel wat het compilatieresultaat zal zijn van de volgende code:

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

Vertel wat het compilatieresultaat zal zijn van de volgende code:

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;
  }
}