Generated by SassMeister.com.

SassMeister-input-HTML.html

 <div>
    <h2>Color Consistent Buttons</h2>
    <p>
      <a href="#" class="button">Standard</a>
      <a href="#" class="special-button">Special</a>
      <a href="#" class="button disabled">Yet another one</a>
    </p>
  </div>

  <div>
    <h2>Buttons With Color Contrast Checks</h2>
    <p>
      <a href="#" class="button good-contrast">Gets no compile warning</a>
      <a href="#" class="button bad-contrast">Gets a compile warning</a><br />
    </p>
  </div>

  <div>
    <h2>Buttons With Color Contrast Selections</h2>
    <p>
      <a href="#" class="button smart-light-contrast">Light background</a>
      <a href="#" class="button smart-contrast">Dark background</a>
    </p>
  </div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import "bourbon/bourbon";
@import "neat/neat";
@import "sass-list-maps";

@import "color-me-sass";

$breakpoints: 480px, 600px, 840px, 960px, 1280px, 1600px !global;
$breakpoint-gutters: 16px, 16px, 24px, 24px, 24px, 24px !global;
$breakpoint-columns: 4, 8, 12, 12, 12, 12 !global;
$breakpoint-names: xs, sm, md, lg, xl, xx !global;

$bp-xs: nth($breakpoints,1) !global;
$bp-sm: nth($breakpoints,2) !global;
$bp-md: nth($breakpoints,3) !global;
$bp-lg: nth($breakpoints,4) !global;
$bp-xl: nth($breakpoints,5) !global;
$bp-xx: nth($breakpoints,6) !global;


@debug $bp-xs;

/*
.col {
width:$bp-xs;
}

*/
$x: 1 !global;
@each $i in $breakpoints {

.test-#{nth($breakpoint-columns,$x)} { 
  content:".";
  }


.col-#{nth($breakpoint-columns,$x)} {
width:$i;
height: $x;
$x:$x+1 !global;



} 
  
}

SassMeister-output.css

html {
  box-sizing: border-box;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

/*
.col {
width:$bp-xs;
}

*/
.test-4 {
  content: ".";
}

.col-4 {
  width: 480px;
  height: 1;
}

.test-8 {
  content: ".";
}

.col-8 {
  width: 600px;
  height: 2;
}

.test-12 {
  content: ".";
}

.col-12 {
  width: 840px;
  height: 3;
}

.test-12 {
  content: ".";
}

.col-12 {
  width: 960px;
  height: 4;
}

.test-12 {
  content: ".";
}

.col-12 {
  width: 1280px;
  height: 5;
}

.test-12 {
  content: ".";
}

.col-12 {
  width: 1600px;
  height: 6;
}

SassMeister-rendered.html

 <div>
    <h2>Color Consistent Buttons</h2>
    <p>
      <a href="#" class="button">Standard</a>
      <a href="#" class="special-button">Special</a>
      <a href="#" class="button disabled">Yet another one</a>
    </p>
  </div>

  <div>
    <h2>Buttons With Color Contrast Checks</h2>
    <p>
      <a href="#" class="button good-contrast">Gets no compile warning</a>
      <a href="#" class="button bad-contrast">Gets a compile warning</a><br />
    </p>
  </div>

  <div>
    <h2>Buttons With Color Contrast Selections</h2>
    <p>
      <a href="#" class="button smart-light-contrast">Light background</a>
      <a href="#" class="button smart-contrast">Dark background</a>
    </p>
  </div>