Generated by SassMeister.com.

colors-palette.css

.biox-black {
  background: #111;
}
.biox-black--text {
  color: #111;
}

.biox-white {
  background: #fff;
}
.biox-white--text {
  color: #fff;
}

.biox-grey {
  background: #f2f3f4;
}
.biox-grey--text {
  color: #f2f3f4;
}

.biox-black-grey {
  background: #222;
}
.biox-black-grey--text {
  color: #222;
}

.biox-dark-blue {
  background: #414550;
}
.biox-dark-blue--text {
  color: #414550;
}

.biox-blue-grey {
  background: #ced8dc;
}
.biox-blue-grey--text {
  color: #ced8dc;
}

.biox-text-blue {
  background: #798f9a;
}
.biox-text-blue--text {
  color: #798f9a;
}

.biox-text-black {
  background: #414550;
}
.biox-text-black--text {
  color: #414550;
}

p {
  background: #fff;
}

p {
  color: #fff;
}

colors-palette.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

$colors: (
	biox-black: #111,
	biox-white: #fff,
	biox-grey: #f2f3f4,
	biox-black-grey: #222,
	biox-dark-blue: #414550,
	biox-blue-grey: #ced8dc,
	biox-text-blue: #798f9a,
	biox-text-black: #414550
);

@function colors($key: 'biox-black') {
  @return map-get($colors, $key);
}


@each $key, $color in $colors {
  .#{$key} {
    background: $color;

    &--text {
    	color: $color;
    }
  }
}

p {
  background: colors('biox-white');
}

p {
  color: colors('biox-white');
}