Доираи намоиши тағирёбандаҳо ва блокҳои мундариҷа дар 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;
  }
}