Sass maps

application.scss

@import "palette";

body {
  font: 20pt "Helvetica Neue", sans-serif;
}

$actions: (
  primary: (
    link: $blue,
    hover: lighten($blue, 0.1),
    active: darken($blue, 0.2)
  ),
  secondary: (
    link: $light-blue,
    hover: lighten($light-blue, 0.2),
    active: darken($light-blue, 0.2)
  ),
  destructive: (
    link: $red,
    hover: lighten($red, 0.05),
    active: darken($red, 0.1)
  )
);

@each $action, $states in $actions {
  .#{$action}-button {
    background: map_get($states, link);
    border: none;
    border-radius: 0.4em;
    padding: 1em 2em;
    display: inline-block;
    font-size: 1em;
    text-decoration: none;
    color: white;

    @each $state, $colour in $states {
      &:#{$state} { background: $colour; }
    }
  }
}

index.html.erb

<button class="primary-button">Primary</button>
<a href=".." class="secondary-button">Secondary</a>
<button class="destructive-button">Delete</button>

palette.scss

// Colours
$blue: rgb(0, 119, 255);
$light-blue: rgb(47, 163, 200);
$red: #cc0000;

// Derived colours
$brand-colour: $blue;
// ...