SASS-da o'zgaruvchilar va kontent bloklarining ko'rish sohasi

Kontent bloklarini miksinga uzatishda ularning ko'rish sohasi aniq blokning joylashuvi bilan belgilanadi, miksining o'zi bilan emas. Shuning uchun, biz miksingning mahalliy o'zgaruvchilarini faqat global o'zgaruvchilar bilan ishlay oladigan uzatilayotgan kontent blokida ishlata olmaymiz.

Quyidagi misolni ko'rib chiqamiz:

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

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

Kompilyatsiya natijasi:

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

Задание 1

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushuntiring:

styles.scss$color: yellow;

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

Задание 2

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushuntiring:

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

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushuntiring:

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