Topic Color Idea

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Bourbon (v4.2.3)
// ----

@import "bourbon/bourbon";

$topics: (
  html: #39ADD1,
  css: #3079AB,
  javascript: #c25975,
  ruby: #e15258,
  business: #F9845B,
  wordpress: #838CC7,
  php: #7D669E,
  ios: #53BBB4,
  android: #5cb860,
  design: #e59a13,
  devtools: #637a91,
  java: #2c9676,
  python: #f092b0,
  diglit: #c38cd4,
  game-development: #20898c,
  csharp: #9e4d83,
  undefined: #717b85
);

@function topic-color($key) {
  @if map-has-key($topics, $key) {
    @return map-get($topics, $key);
  }
  @warn "Unknown `#{$key}` in $topics.";
  @return null;
}

@each $topic_name, $topic in $topics {
  $properties: fill stroke color border-color background-color;
  
  @each $property in $properties {
    .add-#{$topic_name}-#{$property} {
      #{$property}: topic-color(#{$topic_name});
    }
  }
}

SassMeister-output.css

.add-html-fill {
  fill: #39ADD1;
}

.add-html-stroke {
  stroke: #39ADD1;
}

.add-html-color {
  color: #39ADD1;
}

.add-html-border-color {
  border-color: #39ADD1;
}

.add-html-background-color {
  background-color: #39ADD1;
}

.add-css-fill {
  fill: #3079AB;
}

.add-css-stroke {
  stroke: #3079AB;
}

.add-css-color {
  color: #3079AB;
}

.add-css-border-color {
  border-color: #3079AB;
}

.add-css-background-color {
  background-color: #3079AB;
}

.add-javascript-fill {
  fill: #c25975;
}

.add-javascript-stroke {
  stroke: #c25975;
}

.add-javascript-color {
  color: #c25975;
}

.add-javascript-border-color {
  border-color: #c25975;
}

.add-javascript-background-color {
  background-color: #c25975;
}

.add-ruby-fill {
  fill: #e15258;
}

.add-ruby-stroke {
  stroke: #e15258;
}

.add-ruby-color {
  color: #e15258;
}

.add-ruby-border-color {
  border-color: #e15258;
}

.add-ruby-background-color {
  background-color: #e15258;
}

.add-business-fill {
  fill: #F9845B;
}

.add-business-stroke {
  stroke: #F9845B;
}

.add-business-color {
  color: #F9845B;
}

.add-business-border-color {
  border-color: #F9845B;
}

.add-business-background-color {
  background-color: #F9845B;
}

.add-wordpress-fill {
  fill: #838CC7;
}

.add-wordpress-stroke {
  stroke: #838CC7;
}

.add-wordpress-color {
  color: #838CC7;
}

.add-wordpress-border-color {
  border-color: #838CC7;
}

.add-wordpress-background-color {
  background-color: #838CC7;
}

.add-php-fill {
  fill: #7D669E;
}

.add-php-stroke {
  stroke: #7D669E;
}

.add-php-color {
  color: #7D669E;
}

.add-php-border-color {
  border-color: #7D669E;
}

.add-php-background-color {
  background-color: #7D669E;
}

.add-ios-fill {
  fill: #53BBB4;
}

.add-ios-stroke {
  stroke: #53BBB4;
}

.add-ios-color {
  color: #53BBB4;
}

.add-ios-border-color {
  border-color: #53BBB4;
}

.add-ios-background-color {
  background-color: #53BBB4;
}

.add-android-fill {
  fill: #5cb860;
}

.add-android-stroke {
  stroke: #5cb860;
}

.add-android-color {
  color: #5cb860;
}

.add-android-border-color {
  border-color: #5cb860;
}

.add-android-background-color {
  background-color: #5cb860;
}

.add-design-fill {
  fill: #e59a13;
}

.add-design-stroke {
  stroke: #e59a13;
}

.add-design-color {
  color: #e59a13;
}

.add-design-border-color {
  border-color: #e59a13;
}

.add-design-background-color {
  background-color: #e59a13;
}

.add-devtools-fill {
  fill: #637a91;
}

.add-devtools-stroke {
  stroke: #637a91;
}

.add-devtools-color {
  color: #637a91;
}

.add-devtools-border-color {
  border-color: #637a91;
}

.add-devtools-background-color {
  background-color: #637a91;
}

.add-java-fill {
  fill: #2c9676;
}

.add-java-stroke {
  stroke: #2c9676;
}

.add-java-color {
  color: #2c9676;
}

.add-java-border-color {
  border-color: #2c9676;
}

.add-java-background-color {
  background-color: #2c9676;
}

.add-python-fill {
  fill: #f092b0;
}

.add-python-stroke {
  stroke: #f092b0;
}

.add-python-color {
  color: #f092b0;
}

.add-python-border-color {
  border-color: #f092b0;
}

.add-python-background-color {
  background-color: #f092b0;
}

.add-diglit-fill {
  fill: #c38cd4;
}

.add-diglit-stroke {
  stroke: #c38cd4;
}

.add-diglit-color {
  color: #c38cd4;
}

.add-diglit-border-color {
  border-color: #c38cd4;
}

.add-diglit-background-color {
  background-color: #c38cd4;
}

.add-game-development-fill {
  fill: #20898c;
}

.add-game-development-stroke {
  stroke: #20898c;
}

.add-game-development-color {
  color: #20898c;
}

.add-game-development-border-color {
  border-color: #20898c;
}

.add-game-development-background-color {
  background-color: #20898c;
}

.add-csharp-fill {
  fill: #9e4d83;
}

.add-csharp-stroke {
  stroke: #9e4d83;
}

.add-csharp-color {
  color: #9e4d83;
}

.add-csharp-border-color {
  border-color: #9e4d83;
}

.add-csharp-background-color {
  background-color: #9e4d83;
}

.add-undefined-fill {
  fill: #717b85;
}

.add-undefined-stroke {
  stroke: #717b85;
}

.add-undefined-color {
  color: #717b85;
}

.add-undefined-border-color {
  border-color: #717b85;
}

.add-undefined-background-color {
  background-color: #717b85;
}