本身經常使用的mixin（持續更新）

本身經常使用的mixin（持續更新）

做者：吳業飛 時間：2018年12月4日

---

/*
*列表展現的項目
*param {
	$width: 百分比，一行展現4個用25%，以此類推，
	$marginRight：項目水平間距，單位px
}
*/
@mixin width-box($width, $marginRight: 0px) {
	width: calc(#{$width} - #{$marginRight});
	display: inline-block;
	vertical-align: top;
	margin-right: $marginRight;
}
/*
*背景圖片
*param {
	$url: string
}
*/
@mixin background-image($url) {
	background-image: url($url);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
/*
*文本基本設置
*param {
	$fontSize: 
	$lineHeight: 
	$fontFamily: 
	$color: 
	$marginBottom: 
}
*/
@mixin text($fontSize, $lineHeight, $fontFamily, $color, $marginBottom: 0px) {
	font-size: $fontSize;
	line-height: $lineHeight;
	font-family: $fontFamily;
	color: $color;
	margin-bottom: $marginBottom;
}
/*
*a標籤模擬按鈕
*param {
	display: inline-block;
	$fontSize: 
	$lineHeight: 
	$fontFamily: 
	$color: 
	$padding: 
	text-decoration: none;
	$border: 
}
*/
@mixin button($fontSize, $lineHeight, $fontFamily, $color, $padding, $border:1px solid #fff) {
	display: inline-block;
	font-size: $fontSize;
	line-height: $lineHeight;
	font-family: $fontFamily;
	color: $color;
	padding: $padding;
	text-decoration: none;
	border: $border;
}
複製代碼

---

版權聲明：自由轉載-非商用-非衍生-保持署名