SASS'ta Değişkenler ve İçerik Bloklarının Kapsamı

İçerik blokları mixin'lere aktarılırken, kapsamları mixin'in değil, bloğun konumuna göre belirlenir. Bu nedenle, mixin'in yerel değişkenlerini, yalnızca global değişkenlerle çalışabilen aktarılan içerik bloğunda kullanamayız.

Aşağıdaki örneği inceleyelim:

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

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

Derleme sonucu:

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

Задание 1

Aşağıdaki kodun derleme sonucu ne olur?

styles.scss$color: yellow;

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

Задание 2

Aşağıdaki kodun derleme sonucu ne olur?

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

Aşağıdaki kodun derleme sonucu ne olur?

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