@mixin parameters
Use @extend for static blocks of shared properties.
use @mixin when you want the output CSS to change depending on how you call it (i.e. by passing arguments or using an @content block...).
// EXAMPLE 1:
$base-color: pink;
@mixin headline($color, $size) {
color: $color;
font-size: $size;
}
h1 {
@include headline($base-color, 12px);
}
// EXAMPLE 2:
@mixin dashed-border($width, $color) {
border: $width $color dashed;
}
p { @include dashed-border(1px, #000); }