Buttons

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

$Placeholder-Selectors: ();

@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%);
	}
}

@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;
		}
	}
}

.button-badass {
	@include button(#b4d455);
}

.button-coffee {
	@include button(#c0ffee);
}

.button-decaff {
	@include button(#decaff);
}

SassMeister-output.css

.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;
}