@import “variables”;

$grays: (

"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900

) !default;

$colors: (

"base": $color-base,
"primary-light": $color-primary-light,
"primary": $color-primary,
"primary-dark": $color-primary-dark,
"secondary-light": $color-secondary-light,
"secondary": $color-secondary,
"secondary-dark": $color-secondary-dark,
"link-light": $color-link-light,
"link": $color-link,
"link-dark": $color-link-dark,
"rang1": $color-rang1,
"rang2": $color-rang2,
"logo": $color-logo

) !default;

// .color-gray- // .bg-gray- @each $key, $value in $grays {

.color-gray-#{$key} {color: $value}
.bg-gray-#{$key} {background-color: $value}

}

@each $key, $value in $colors {

.color-#{$key} {color: $value}
.bg-#{$key} {background-color: $value}

}