Genoemde parameters van mixins in SASS
Aan mixins kunnen genoemde parameters worden doorgegeven. Laten we dit bekijken aan de hand van het volgende voorbeeld:
@mixin active($color) {
border: {
color: $color;
style: solid;
}
}
p {
@include active($color: orange);
}
div {
@include active($color: green);
}
Resultaat van compilatie:
p {
border-color: orange;
border-style: solid;
}
div {
border-color: green;
border-style: solid;
}
Daarnaast kunnen standaardwaarden aan parameters worden doorgegeven:
@mixin active($color, $width: 2px) {
border: {
color: $color;
width: $width;
style: dotted;
}
}
p {
@include active(yellow);
}
div {
@include active(yellow, 4px);
}
Na compilatie zien we:
p {
border-color: yellow;
border-width: 2px;
border-style: dotted;
}
div {
border-color: yellow;
border-width: 4px;
border-style: dotted;
}
Vertel wat het resultaat van de compilatie van de volgende code zal zijn:
@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);
}
Vertel wat het resultaat van de compilatie van de volgende code zal zijn:
@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);
}
Vertel wat het resultaat van de compilatie van de volgende code zal zijn:
@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);
}