Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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);
}
$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);
}
};
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.