SASS-та айнымалылар мен контент блоктарының көріну облысы

Контент блоктарын миксинге берген кезде олардың көріну облысы миксиннің емес, блоктың нақты орналасуымен анықталады. Демек, біз миксиннің жергілікті айнымалыларын берілетін контент блоктарында пайдалана алмаймыз, олар тек жалпы айнымалылармен жұмыс істей алады.

Келесі мысалды қарастырайық:

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