scss SASS：按钮Mixin

Posted 2021-05-18

/*
 ==========================================================================
  $Sass Buttons
 ==========================================================================
 */


/*
 * Mixin
 */

@mixin btn($btnColor: $colorBtn, $btnFontColor: $white, $btnFontSize: 2, $btnPadding: 5px 15px) {
	display: table;
	padding: $btnPadding;
	background: $btnColor;
	border: 1px solid darken($btnColor, 10%);
	color: $btnFontColor;
	text-decoration: none;
	text-align: center;
	@include remFallback(font-size, $btnFontSize);
	@include text-shadow(2px 2px 2px rgba(darken($btnColor, 50%), 0.5));
	@include border-radius(5px);
	@include transition(background 0.2s ease);
	&:hover {
		background: darken($btnColor, 15%);
	}
}

/* Placeholder
   ===================================================================== */
// $btnColor: $colorBtn, $btnFontColor: $white, $btnFontSize: 2

%btnRed {
	@include btn($red);
}

%btnBlack {
	@include btn($black);
}

%btnGray {
	@include btn($grayLight);
}

%btnWhite {
	@include btn($white, $black);
}