Skip to content

Instantly share code, notes, and snippets.



Last active Feb 15, 2019
What would you like to do?
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
You can’t perform that action at this time.