Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$scotch-color-key: 'base' !default;

$scotch-colors: (
  'primary': (
    'base': #8e3329,
    'light': #d9534f,
    'dark': #c9302c
  ),
  'accent': (
    'base': #d98328,
    'light': #dd8f3d,
    'dark': #c57623
  ),
  'secondary': (
    'base': #5a1321,
    'light': #7b1a2d,
    'dark': #51111e
  ),
  'foreground': (
    'base': #191919,
    'light': #333333,
    'dark': #111111,
    'darker': #000000
  ),
  'background': (
    'base': #e9e9e9,
    'light': #ffffff,
    'dark': #dddddd
  )
);

$scotch-opacity: (
  'light': 0.8, // opacity used with lighter colors
  'dark': 0.4,  // opacity used with darker colors
  // ... etc.
);

@function scotch-color(
  $name: 'primary',
  $variant: $scotch-color-key,
  $opacity: 1
) {
  $color: null;
  
  // Get the color spectrum
  $color-spectrum: map-get($scotch-colors, $name);
  
  // Get the color variant
  @if $color-spectrum {
    $color: map-get($color-spectrum, $variant);
  }
  
  // Get the alpha setting
  $alpha: if(type-of($opacity) == 'number', $opacity, map-get($scotch-opacity, $opacity));
  
  // Set the alpha of the color
  @if $alpha {
    $color: rgba($color, $alpha);
  }
  
  @return $color;
}

// Example usage
.scotch-button {
  background-color: scotch-color('primary');
  
  &:hover {
    background-color: scotch-color('primary', 'light');
  }
  
  &.secondary {
    background-color: scotch-color('secondary');
    
    &:hover {
      background-color: scotch-color('secondary', 'dark');
    }
  }
  
  &.transparent {
    background-color: scotch-color('primary', $opacity: 'light');
  }
}

SassMeister-output.css

.scotch-button {
  background-color: #8e3329;
}
.scotch-button:hover {
  background-color: #d9534f;
}
.scotch-button.secondary {
  background-color: #5a1321;
}
.scotch-button.secondary:hover {
  background-color: #51111e;
}
.scotch-button.transparent {
  background-color: rgba(142, 51, 41, 0.8);
}