https://yami.io/css-variable-theming/

Simple-CSS-Theme-System.css

button {
    --text-color            : #333;
    --background-color      : #F5F5F5;
    --background-hover-color: #EEE;
}

button.primary {
    --text-color            : #FFF;
    --background-color      : #348CEE;
    --background-hover-color: #3186E4;
}

button {
    /** 你甚至可以邊定義顏色邊定義外觀樣式，耶！ */
    display    : block;
    line-height: 1;

    color      : var(--text-color);
    background : var(--background-color);
}

button:hover {
    background: var(--background-hover-color);
}

Simple-Sass-Theme-System.scss

$theme-colors: (
    '': (
        'text-color'            : #333,
        'background-color'      : #F5F5F5,
        'background-hover-color': #EEE,
    ),
    '.primary': (
        'text-color'            : #FFF,
        'background-color'      : #348CEE,
        'background-hover-color': #3186E4,
    ),
    '.positive': (
        'text-color'            : #FFF,
        'background-color'      : #48C774,
        'background-hover-color': #44BF6F,
    ),
); 

@each $name, $colors in $theme-colors {
    button#{$name} {
        color     : map-get($colors, text-color);
        background: map-get($colors, background-color);
    }
    button#{$name}:hover {
        background: map-get($colors, background-hover-color);
    }
};