Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----
/* 1 */
$Placeholder-Selectors: ();
/* 2 */
@mixin button($color, $extend: true) {
@include button-static($extend);
background-color: $color;
border-color: mix(black, $color, 25%);
&:hover {
background-color: mix(black, $color, 15%);
border-color: mix(black, $color, 40%);
}
}
/* 3 */
@mixin button-static($extend: true) {
$button-selector: map-get($Placeholder-Selectors, 'button');
@if $extend == true {
@if $button-selector == null {
$button-selector: unique-id();
$Placeholder-Selectors: map-merge($Placeholder-Selectors, ('button': $button-selector)) !global;
@at-root %#{$button-selector} {
@include button-static(false);
}
}
@extend %#{$button-selector};
}
@else {
border: 1px solid;
border-radius: 5px;
padding: .25em .5em;
&:hover {
cursor: pointer;
}
}
}
/* 4 */
.button-badass {
@include button(#b4d455);
}
.button-coffee {
@include button(#c0ffee);
}
.button-decaff {
@include button(#decaff);
}
/* 1 */
/* 2 */
/* 3 */
/* 4 */
.button-badass {
background-color: #b4d455;
border-color: #879f3f;
}
.button-badass, .button-coffee, .button-decaff {
border: 1px solid;
border-radius: 5px;
padding: .25em .5em;
}
.button-badass:hover, .button-coffee:hover, .button-decaff:hover {
cursor: pointer;
}
.button-badass:hover {
background-color: #99b448;
border-color: #6c7f33;
}
.button-coffee {
background-color: #c0ffee;
border-color: #90bfb2;
}
.button-coffee:hover {
background-color: #a3d8ca;
border-color: #73998e;
}
.button-decaff {
background-color: #decaff;
border-color: #a697bf;
}
.button-decaff:hover {
background-color: #bcabd8;
border-color: #857999;
}
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.