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:

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

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

Kompileerimise tulemus:

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

Задание 1

Rääkige, milline on kompileerimise tulemus järgnevast koodist:

styles.scss$color: yellow;

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

Задание 2

Rääkige, milline on kompileerimise tulemus järgnevast koodist:

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

Rääkige, milline on kompileerimise tulemus järgnevast koodist:

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