SASSдаги ўзгарувчилар ва контент блокларининг кўриш доираси

Контент блокларини миксинга ўтказганда, уларнинг кўриш доираси блокнинг аник жойлашиши билан аникланади, миксинники билан эмас. Шу sababli, биз ўтказаётган контент блоки ичида миксиннинг локал ўзгарувчиларидан фойдалана олмаймиз, унглобал ўзгарувчилар билангина ишлаяди.

Куйидаги мисолни кўриб чикайлик:

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

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

Компиляция натижаси:

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

Задание 1

Куйидаги кодни компиляция қилиш натижаси қандай бўлишини тушантиринг:

styles.scss$color: yellow;

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

Задание 2

Куйидаги кодни компиляция қилиш натижаси қандай бўлишини тушантиринг:

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

Куйидаги кодни компиляция қилиш натижаси қандай бўлишини тушантиринг:

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