Generated by SassMeister.com.

SassMeister-input-HTML.html

<article>
  <h1 class="title">This is a Title</h1>
  <p>this is a paragraph</p>
</article>

SassMeister-input.scss

// ----
// libsass (v3.1.0-beta)
// ----

$color--purple: #a993e1;
$color--purple--dark: #665695;
$color--purple--light--mid: #c7bceb;
$color--purple--light: #e6e6f5;
$color--blue--paler: #eef0f3;
$color--blue--pale: #d9e2ed;
$color--blue: #6c9acd;
$color--blue--dark: #375573;
$color--blue--darker: #2E4455;
$color--blue--light: #97dcf7;
$color--yellow: #f5c655;
$color--yellow--dark: #957128;
$color--green: #a7da8d;
$color--green--dark: #677f5c;
$color--red: #ed5759;
$color--red--dark: #92333b;
$color--white: hsl(0, 0%, 100%);
$color--gray--light: #f5f5f5;
$color--gray--lightish: #cccccc;
$color--gray--light--mid: #8c8e93;
$color--gray: #4d515b;
$color--gray--dark: #060606;
$color--black: hsl(0, 0%, 0%);
$color--transparent--white: hsla(0, 0%, 100%, 0);

$color-map: (
  color--purple: $color--purple,
  color--purple--dark: $color--purple--dark,
  color--purple--light--mid: $color--purple--light--mid,
  color--purple--light: $color--purple--light,
  color--blue--paler: $color--blue--paler,
  color--blue--pale: $color--blue--pale,
  color--blue: $color--blue,
  color--blue-dark: $color--blue--dark,
  color--blue-darker: $color--blue--darker,
  color--blue-light: $color--blue--light,
  color--yellow: $color--yellow,
  color--yellow-dark: $color--yellow--dark,
  color--green: $color--green,
  color--green-dark: $color--green--dark,
  color--red: $color--red,
  color--red-dark: $color--red--dark,
  color--white: $color--white,
  color--gray--light: $color--gray--light,
  color--gray--lightish: $color--gray--lightish,
  color--gray--light--mid: $color--gray--light--mid,
  color--gray: $color--gray,
  color--gray--dark: $color--gray--dark,
  color--black: $color--black
);

@mixin try-colors() {
  @each $color-var, $color-val in $color-map {
    /* color: #{$color-val}; */
    /* background-color: #{$color-val}; */
  }
}

article {
  @include try-colors();
}
.title {
  @include try-colors();
}

SassMeister-output.css

article {
  /* color: #a993e1; */
  /* background-color: #a993e1; */
  /* color: #665695; */
  /* background-color: #665695; */
  /* color: #c7bceb; */
  /* background-color: #c7bceb; */
  /* color: #e6e6f5; */
  /* background-color: #e6e6f5; */
  /* color: #eef0f3; */
  /* background-color: #eef0f3; */
  /* color: #d9e2ed; */
  /* background-color: #d9e2ed; */
  /* color: #6c9acd; */
  /* background-color: #6c9acd; */
  /* color: #375573; */
  /* background-color: #375573; */
  /* color: #2E4455; */
  /* background-color: #2E4455; */
  /* color: #97dcf7; */
  /* background-color: #97dcf7; */
  /* color: #f5c655; */
  /* background-color: #f5c655; */
  /* color: #957128; */
  /* background-color: #957128; */
  /* color: #a7da8d; */
  /* background-color: #a7da8d; */
  /* color: #677f5c; */
  /* background-color: #677f5c; */
  /* color: #ed5759; */
  /* background-color: #ed5759; */
  /* color: #92333b; */
  /* background-color: #92333b; */
  /* color: white; */
  /* background-color: white; */
  /* color: #f5f5f5; */
  /* background-color: #f5f5f5; */
  /* color: #cccccc; */
  /* background-color: #cccccc; */
  /* color: #8c8e93; */
  /* background-color: #8c8e93; */
  /* color: #4d515b; */
  /* background-color: #4d515b; */
  /* color: #060606; */
  /* background-color: #060606; */
  /* color: black; */
  /* background-color: black; */ }

.title {
  /* color: #a993e1; */
  /* background-color: #a993e1; */
  /* color: #665695; */
  /* background-color: #665695; */
  /* color: #c7bceb; */
  /* background-color: #c7bceb; */
  /* color: #e6e6f5; */
  /* background-color: #e6e6f5; */
  /* color: #eef0f3; */
  /* background-color: #eef0f3; */
  /* color: #d9e2ed; */
  /* background-color: #d9e2ed; */
  /* color: #6c9acd; */
  /* background-color: #6c9acd; */
  /* color: #375573; */
  /* background-color: #375573; */
  /* color: #2E4455; */
  /* background-color: #2E4455; */
  /* color: #97dcf7; */
  /* background-color: #97dcf7; */
  /* color: #f5c655; */
  /* background-color: #f5c655; */
  /* color: #957128; */
  /* background-color: #957128; */
  /* color: #a7da8d; */
  /* background-color: #a7da8d; */
  /* color: #677f5c; */
  /* background-color: #677f5c; */
  /* color: #ed5759; */
  /* background-color: #ed5759; */
  /* color: #92333b; */
  /* background-color: #92333b; */
  /* color: white; */
  /* background-color: white; */
  /* color: #f5f5f5; */
  /* background-color: #f5f5f5; */
  /* color: #cccccc; */
  /* background-color: #cccccc; */
  /* color: #8c8e93; */
  /* background-color: #8c8e93; */
  /* color: #4d515b; */
  /* background-color: #4d515b; */
  /* color: #060606; */
  /* background-color: #060606; */
  /* color: black; */
  /* background-color: black; */ }

SassMeister-rendered.html

<article>
  <h1 class="title">This is a Title</h1>
  <p>this is a paragraph</p>
</article>