beckon-t
10/19/2017 - 4:37 PM

@mixin parameters

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