Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// libsass (v3.0.2)
// ----
// Sass
// Colors
$sea_green: #16a085;
$pomegranate: #c0392b;
$orange: #e04604;
$olive_green: #6a8500;
$pink: #b72898;
$purple: #491f70;
$turquoise: #02b4ce;
$green_gray: #7f8c8d;
$mustard: #c3a918;
$surf-green: #02aab3;
$maillot-jaune: #f0de16;
$caribe: #a6c9d1;
$chartreuse: #c8dc77;
$mediterranean-red: #ff513a;
$tint: ("greengray": $green_gray, "pink": $pink, "orange": $orange, "green": $olive_green,
"purple": $purple, "turquoise": $turquoise, "pomegranate": $pomegranate, "seafoam": $sea_green,
"mustard": $mustard, "surf-green": $surf-green, "maillot-jaune": $maillot-jaune,
"caribe": $caribe, "chartreuse": $chartreuse, "mediterranean-red": $mediterranean-red);
// Define the increment.
$i: 1;
@each $design_tint in map-keys($tint) {
$tintvar: map-get($tint, $design_tint);
@if $i < 10 {
.bg_tint_0#{$i} {
background-color: $tintvar;
}
}
@else {
.bg_tint_#{$i} {
background-color: $tintvar;
}
}
// Now increment.
$i: $i + 1;
}
@each $design_tint in map-keys($tint) {
$tintvar: map-get($tint, $design_tint);
&.bg-tint-#{$design_tint} {
background-color: $tintvar;
}
}
.bg_tint_01 {
background-color: #7f8c8d; }
.bg_tint_02 {
background-color: #b72898; }
.bg_tint_03 {
background-color: #e04604; }
.bg_tint_04 {
background-color: #6a8500; }
.bg_tint_05 {
background-color: #491f70; }
.bg_tint_06 {
background-color: #02b4ce; }
.bg_tint_07 {
background-color: #c0392b; }
.bg_tint_08 {
background-color: #16a085; }
.bg_tint_09 {
background-color: #c3a918; }
.bg_tint_10 {
background-color: #02aab3; }
.bg_tint_11 {
background-color: #f0de16; }
.bg_tint_12 {
background-color: #a6c9d1; }
.bg_tint_13 {
background-color: #c8dc77; }
.bg_tint_14 {
background-color: #ff513a; }
.bg-tint-greengray {
background-color: #7f8c8d; }
.bg-tint-pink {
background-color: #b72898; }
.bg-tint-orange {
background-color: #e04604; }
.bg-tint-green {
background-color: #6a8500; }
.bg-tint-purple {
background-color: #491f70; }
.bg-tint-turquoise {
background-color: #02b4ce; }
.bg-tint-pomegranate {
background-color: #c0392b; }
.bg-tint-seafoam {
background-color: #16a085; }
.bg-tint-mustard {
background-color: #c3a918; }
.bg-tint-surf-green {
background-color: #02aab3; }
.bg-tint-maillot-jaune {
background-color: #f0de16; }
.bg-tint-caribe {
background-color: #a6c9d1; }
.bg-tint-chartreuse {
background-color: #c8dc77; }
.bg-tint-mediterranean-red {
background-color: #ff513a; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment