Именовани параметри миксина у SASS-у

У миксине се могу задати именовани параметри. Хајде да то размотримо на следећем примеру:

styles.scss@mixin active($color) {
  border: {
    color: $color;
    style: solid;
  }
}
p {
  @include active($color: orange);
}
div {
  @include active($color: green);
}

Резултат компајлирања:

styles.cssp {
  border-color: orange;
  border-style: solid;
}
div {
  border-color: green;
  border-style: solid;
}

Поред тога, у миксине се могу проследити подразумеване вредности параметара:

styles.scss@mixin active($color,  $width: 2px) {
  border: {
    color: $color;
    width: $width;
    style: dotted;
  }
}
p {
  @include active(yellow);
}
div {
  @include active(yellow, 4px);
}

Након компајлирања видећемо:

styles.cssp {
  border-color: yellow;
  border-width: 2px;
  border-style: dotted;
}
div {
  border-color: yellow;
  border-width: 4px;
  border-style: dotted;
}

Задание 1

Реците, какав ће бити резултат компајлирања следећег кода:

styles.scss@mixin super-button($color, $background-color, $border-radius) {
  color: $color;
  background-color: $background-color;
  border-radius: $border-radius;
}
.active-button {
  @include super-button($color: white,  $background-color: red, $border-radius: 2px);
}

Задание 2

Реците, какав ће бити резултат компајлирања следећег кода:

styles.scss@mixin super-button($color, $background-color, $border-radius: 5px) {
  color: $color;
  background-color: $background-color;
  border-radius: $border-radius;
}
.active-button {
  @include super-button($color: white,  $background-color: red);
}

Задание 3

Реците, какав ће бити резултат компајлирања следећег кода:

styles.scss@mixin super-button($color, $background-color: orange, $border-radius: 5px) {
  color: $color;
  background-color: $background-color;
  border-radius: $border-radius;
}
.active-button {
  @include super-button($color: white, $border-radius:3px);
}