Generated by SassMeister.com.

SassMeister-input-HTML.html

<article>
  <h1 class="title">Experiment with colors when designing in the browser</h1>
  <h2 class="subtitle">Of course this isn't limited to colors.</h2> 
  <p>I wanted a way to eperiment with all the colors in my color scheme when I was using the CSS inspector in my browser. So I wrote a simple mixin that loops through all the values in my color map and writes them as a CSS comment. Then I can pop open that element in my inspector and start turning on color combos.</p>
  <p>As I move through a project I'll write other similar mixins for things like fonts, borders, and spacing. It's been pretty helpful!</p>
  <p>Go ahead and try it out! Inspect any of the elements below and find colors you like.</p>
</article>

SassMeister-input.scss

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

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

// 2. write a mixin to write the colors in the map to css comments
@mixin try-colors() {
  @each $color-var, $color-val in $colors {
    /* color: #{$color-val}; */
    /* background-color: #{$color-val}; */
  }
}

// 3. Experiment!
article {
  padding: 0.25em 0.5em;
  // oh look I chose a color!
  color: map-get($colors, blue);
  background-color: map-get($colors, gray--light);
  // I always call this last so it overwrites any other colors I was playing with
  // be sure to remove it when you're done experimenting
  @include try-colors();
}
.title {
  @include try-colors();
}
.subtitle {
  @include try-colors();
}
p {
  @include try-colors();
}

SassMeister-output.css

article {
  padding: 0.25em 0.5em;
  color: #6c9acd;
  background-color: #f5f5f5;
  /* 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 k; */
  /* background-color: #677f5c k; */
  /* 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 k; */
  /* background-color: #677f5c k; */
  /* 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; */ }

.subtitle {
  /* 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 k; */
  /* background-color: #677f5c k; */
  /* 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; */ }

p {
  /* 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 k; */
  /* background-color: #677f5c k; */
  /* 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">Experiment with colors when designing in the browser</h1>
  <h2 class="subtitle">Of course this isn't limited to colors.</h2> 
  <p>I wanted a way to eperiment with all the colors in my color scheme when I was using the CSS inspector in my browser. So I wrote a simple mixin that loops through all the values in my color map and writes them as a CSS comment. Then I can pop open that element in my inspector and start turning on color combos.</p>
  <p>As I move through a project I'll write other similar mixins for things like fonts, borders, and spacing. It's been pretty helpful!</p>
  <p>Go ahead and try it out! Inspect any of the elements below and find colors you like.</p>
</article>