Phạm vi biến và khối nội dung trong SASS

Khi truyền các khối nội dung vào mixin, phạm vi của chúng được xác định bởi vị trí cụ thể của khối, chứ không phải bởi mixin. Do đó, chúng ta không thể sử dụng biến cục bộ của mixin trong khối nội dung được truyền vào, khối này chỉ có thể hoạt động với các biến toàn cục.

Hãy xem xét ví dụ sau:

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

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

Kết quả biên dịch:

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

Задание 1

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:

styles.scss$color: yellow;

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

Задание 2

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:

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

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:

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