Skip to content

Instantly share code, notes, and snippets.

@brandonbarringer
Last active November 26, 2018 23:50
Show Gist options
  • Save brandonbarringer/347d2389aa3c6e3f7b4d51ed4913c52a to your computer and use it in GitHub Desktop.
Save brandonbarringer/347d2389aa3c6e3f7b4d51ed4913c52a to your computer and use it in GitHub Desktop.
@mixin color-modifiers($attribute: 'color', $selector: '.') {
@each $name, $color in $colors {
&#{$selector}#{$name} {
@each $tone, $hex in $color {
& #{$selector}#{$tone} {
#{$attribute}: $hex;
}
}
}
}
}
/*
body {
@include color-modifiers()
}
*/
/* .....output
body.default .accent1 {
background-color: #F2F2F2; }
body.default .accent2 {
background-color: #ddd; }
body.default .background {
background-color: #ffffff; }
body.default .foreground {
background-color: #244C5A; }
body.hotel .accent1 {
background-color: #b5cbdb; }
body.hotel .accent2 {
background-color: #7BA3BF; }
body.hotel .background {
background-color: #244C5A; }
*/
// Color Schemes
$colors: (
default: (
accent1: #F2F2F2,
accent2: #ddd,
background: #ffffff,
foreground: #244C5A
),
hotel: (
accent1: tint(#7BA3BF, 44%),
accent2: #7BA3BF,
background: #244C5A,
foreground: #F6E7CE
),
gaming: (
accent1: #7A7D81,
accent2: #565555,
background: #27251F,
foreground: #F6E7CE
),
entertainment: (
accent1: #DC6243,
accent2: #D3163B,
background: #B42937,
foreground: #F6E7CE
),
dining: (
accent1: #D83658,
accent2: #DD7165,
background: #9B545D,
foreground: #F6E7CE
),
activities: (
accent1: #EBA607,
accent2: #DD6731,
background: #B14E2B,
foreground: #F6E7CE
),
pool-spa: (
accent1: #5DAFAE,
accent2: #0085A2,
background: #376E97,
foreground: #FFFFFF
),
conventions: (
accent1: #7D5578,
accent2: #675159,
background: #563640,
foreground: #F6E7CE
)
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment