Mainīgo un satura bloku darbības joma SASS

Pārsūtot satura blokus miksinā to darbības jomu nosaka konkrēta bloka izvietojums, nevis miksa. Tāpēc mēs nevaram izmantot miksa lokālos mainīgos pārsūtāmajā satura blokā, kas spēs strādāt tikai ar globālajiem mainīgajiem.

Apskatīsim šādu piemēru:

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

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

Kompilācijas rezultāts:

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

Задание 1

Pastāstiet, kāds būs kompilācijas rezultāts šim kodam:

styles.scss$color: yellow;

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

Задание 2

Pastāstiet, kāds būs kompilācijas rezultāts šim kodam:

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

Pastāstiet, kāds būs kompilācijas rezultāts šim kodam:

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