Skip to content

Instantly share code, notes, and snippets.

@scerelli
Created June 9, 2015 10:42
Show Gist options
  • Save scerelli/b64663e31191bf3609cf to your computer and use it in GitHub Desktop.
Save scerelli/b64663e31191bf3609cf to your computer and use it in GitHub Desktop.
A simply way to create components with same structure but based on different color schemes using sass, in this example i create a set of buttons based on a variable map then looping on it i create a set of classes based on the container key. Feel free to improve this gist :) SASS 3.3 or greater is required
// BUTTONS
// check the $btn var in _variable.scss. to add buttons simply add a block of color inside
// $btn map
=btn-scheme ($type, $color)
.btn--#{$type}
background-color: map-get($color, "bg")
color: map-get($color, "text")
&:hover, &:link, &:focus, &:active
color: map-get($color, "text")
text-decoration: none
&:hover
box-shadow: 0.5px 0.866px 2px 0px rgba(0, 0, 0, 0.2)
background-color: map-get($color, "bg-hover")
&:active
box-shadow: 0.5px 0.866px 2px 0px rgba(0, 0, 0, 0.2)
background-color: map-get($color, "bg-pressed")
&.btn--disabled
background-color: map-get($color, "bg-disabled")
color: map-get($color, "text-disabled")
pointer-events: none
.btn
display: inline-block
font-family: 'Helvetica', sans-serif
border-radius: 2px
transition: all .2s ease
font-size: 14px
text-transform: uppercase
font-weight: bold
padding: 15px
text-decoration: none
@each $type, $color in $btn
+btn-scheme($type, $color)
$btn: (
"primary": (
"bg": #333333,
"bg-hover": #4d4d4d,
"bg-pressed": #666666,
"bg-disabled": #d6d6d6,
"text": #ffffff,
"text-disabled": #999999
),
"lighter": (
"bg": #ffffff,
"bg-hover": #e6e6e6,
"bg-pressed": #cccccc,
"bg-disabled": #5c5c5c,
"text": #333333,
"text-disabled": #333333
)
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment