'Sass color scheme with contrast mixins
I've created this colour funcion that works fine by getting the $theme-colors.
I was tring aslo to create a mixin that could create contrasts of those colours.
I have to mixins one is for scheme specific colours and the other isfor contrast.
Now, please could anyone help me to understand why this mixing below doesn't work? I don't get a proper error but i guess is todo with the line 42, $property, I'm not sure is should be written that way
I have a demo too.
$theme-colors: (
white: #ffffff,
black: #000,
orange: #FF9600,
green: #188049,
red: #ea0000,
red-dark: #bc0031, //brand
yellow: #ffcc00,
grey-dark: #2e3137,
grey-light: #CCC,
grey: #676973,
blue-light: #3771d0, //buttons primary
blue-dark: #274d8b, // buttons secondary
blue: #0D45A0, //links
teal: #30737B, //Teal
slate: #d5e5ff,
brand: #bc0031
);
@function color($theme-color) {
@return map-get($theme-colors, $theme-color);
}
@mixin scheme($property, $key, $self: false) {
// Removes modifiers from the key
$key-clean: nth(str-split($key, "--"), 1);
$key-modifier: if(
str-index($key, "--") != null,
#{"--" + nth(str-split($key, "--"), 2)},
""
);
// Loop through all color schemes building classes and properties
@each $scheme, $data in $theme-colors {
@if map-has-key($data, $key-clean) and ($self == "both" or $self == false) {
.scheme--#{$scheme} & {
@include $property, map-get($data, $key-clean) + $key-modifier;
}
}
}
@each $scheme, $data in $theme-colors {
@if map-has-key($data, $key-clean) and ($self == "both" or $self == true) {
&.scheme--#{$scheme} {
@include $property, map-get($data, $key-clean) + $key-modifier;
}
}
}
}
@mixin scheme-contrast($property, $key, $self: false) {
// Removes modifiers from the key
$key-clean: nth(str-split($key, "--"), 1);
$key-modifier: if(
str-index($key, "--") != null,
#{"--" + nth(str-split($key, "--"), 2)},
""
);
// Loop through all color schemes building classes and properties
@each $scheme, $data in $theme-colors {
@if map-has-key($data, $key-clean) and ($self == "both" or $self == false) {
.scheme--#{$scheme} & {
$background-color: color map-get($data, $key-clean) + $key-modifier,
true;
#{$property}: contrasting-color($background-color);
}
}
}
@each $scheme, $data in $theme-colors {
@if map-has-key($data, $key-clean) and ($self == "both" or $self == true) {
&.scheme--#{$scheme} {
$background-color: color map-get($data, $key-clean) + $key-modifier,
true;
#{$property}: contrasting-color($background-color);
}
}
}
}
h1 {
@include scheme(background-color, red-dark);
@include scheme-contrast(color, black);
border-width: 1px;
border-style: solid;
@include scheme-contrast(border-color, red-dark);
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
