Sass Mixins for Color Variables
// Text Color Mixin. | |
@mixin color($colorVar) { | |
color: map-get($themeColors, $colorVar); | |
color: var($colorVar); | |
} | |
// Background Color mixin. | |
@mixin backgroundColor($colorVar) { | |
background-color: map-get($themeColors, $colorVar); | |
background-color: var($colorVar); | |
} |
// Theme Colors. | |
$themeColors: ( | |
--primary-color : #006699, | |
--secondary-color : #0791b6, | |
--accent-color : #ddcc11, | |
); |
@import '_variables'; | |
@import '_mixins'; | |
// Usage. | |
a { | |
@include color(--primary-color); | |
} | |
// Output. | |
a { | |
color: #006699; | |
color: var(--primary-color); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment