SASS Mixin Example

sass_mixin.scss

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

@mixin border-shadow($horizontal, $vertical, $blur, $spread, $color) {
  -webkit-box-shadow: $horizontal $vertical $blur $spread $color;
  box-shadow: $horizontal $vertical $blur $spread $color;
}

.message {
  @include border-radius(4px);
  @include border-shadow(0, 0, 1px, 1px, rgb(44, 44, 44));
}

.error_message {
  @extends .message;
  background-color: red;
  p {
    color: white;
  }
}

.warning_message {
  @extends .message;
  background-color: yellow;
}