Example of Sass mixins

card-accent.scss

@mixin accent-colors($position, $direction) {
  @if $direction == 'x' {
    border-#{$position}-left-radius: 0;
    border-#{$position}-right-radius: 0;
  } @else {
    border-top-#{$position}-radius: 0;
    border-bottom-#{$position}-radius: 0;
  }

  border-#{$position}: 3px solid transparent;

  padding-#{$position}: 2.5rem;

  &.blue {
    border-#{$position}-color: #2196f3;
  }
  &.red {
    border-#{$position}-color: #f44336;
  }
  &.gold {
    border-#{$position}-color: #ffc107;
  }
  &.green {
    border-#{$position}-color: #4caf50;
  }
  &.purple {
    border-#{$position}-color: #673ab7;
  }
}

.card {
  display: block;
  background-color: white;
  padding: 1rem;
  border: 1px solid #b3b3b3;
  border-radius: 3px;
  box-shadow: 0 1px 3px 0px #c7c7c7;

  &.accent-top {
    @include accent-colors('top', 'x');
  }
  &.accent-bottom {
    @include accent-colors('bottom', 'x');
  }
  &.accent-left {
    @include accent-colors('left', 'y');
  }
  &.accent-right {
    @include accent-colors('right', 'y');
  }
}