自己常用的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;
}
复制代码

---

版权声明：自由转载-非商用-非衍生-保持署名

转载于:https://juejin.im/post/5c11c2ca6fb9a04a07303c9a