Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

$grey: #C1CAD6;
$orange: #EF4640;
$blue: #4392F1;
$green: #00A676;
$purple: #67597A;
$white: #ffffff;
$black: #525252;

$post-colours: (
    case-study: (
        base:   $blue,
        lighter: lighten($blue, 20%),
        light: lighten($blue, 10%),
        hover: darken($blue, 10%),
        svg:  case-study
    ),

    journal: (
        base: $green,
        lighter: lighten($green, 20%),
        light: lighten($green, 10%),
        hover: darken($green, 10%),
        svg: journal
    )
);

@function post-colour($post-colour, $tone: 'base') {
    @return map-get(map-get($post-colours, $post-colour), $tone);
}

@function get-post-colour($post-colour, $tone: 'base') {
    @return map-get(map-get($post-colours, $post-colour), $tone);
}


@each $selector, $value in $post-colours {
    .post.post--#{$selector} {
        border-top: 2px solid post-colour($selector, hover);
        background-color: $selector;
    }

    article.post--#{$selector} h2,
    article.post--#{$selector} a{
        color: post-colour($selector);
    }

    article.post--#{$selector} a:hover {
      color: post-colour($selector, hover);
    }

    [data-archive="#{$selector}"].post-archive__list .btn {
        background-color: post-colour($selector);

        &:hover {
            background-color: post-colour($selector, hover);
        }
    }
}

SassMeister-output.css

.post.post--case-study {
  border-top: 2px solid #1476ed;
  background-color: case-study;
}

article.post--case-study h2,
article.post--case-study a {
  color: #4392F1;
}

article.post--case-study a:hover {
  color: #1476ed;
}

[data-archive="case-study"].post-archive__list .btn {
  background-color: #4392F1;
}

[data-archive="case-study"].post-archive__list .btn:hover {
  background-color: #1476ed;
}

.post.post--journal {
  border-top: 2px solid #007352;
  background-color: journal;
}

article.post--journal h2,
article.post--journal a {
  color: #00A676;
}

article.post--journal a:hover {
  color: #007352;
}

[data-archive="journal"].post-archive__list .btn {
  background-color: #00A676;
}

[data-archive="journal"].post-archive__list .btn:hover {
  background-color: #007352;
}