mixin复用样式总结

mixin复用样式总结

// flex布局 默认水平居中垂直居中 默认方向为row
@mixin flex($justify-content: center, $align-items: center, $flex-direction: row) {
	display: flex;
	justify-content: $justify-content;
	align-items: $align-items;
	flex-direction: $flex-direction;
}
// flex布局 默认水平居中垂直居中 默认方向为column
@mixin flex-column($justify-content: center, $align-items: center) {
	@include flex($justify-content, $align-items, column);
}
// 文字样式 默认颜色为$uni-text-color 默认字体大小为$uni-font-size-base 默认行高为1.5 默认左对齐
@mixin text($color: $uni-text-color, $font-size: $uni-font-size-base, $line-height: 1.5, $align: left) {
	color: $color;
	font-size: $font-size;
	line-height: $line-height;
	text-align: $align;
}
// 文字样式 默认颜色为$uni-text-color 默认字体大小为$uni-font-size-base 默认行高为1.5 默认居中
@mixin text-center($color: $uni-text-color, $font-size: $uni-font-size-base, $line-height: 1.5) {
	@include text($color, $font-size, $line-height, center);
}
// 图片样式 默认宽高为$uni-img-size-base 默认圆角为$uni-border-radius-base 默认object-fit为cover 默认object-position为center center
@mixin img(
	$width: $uni-img-size-base,
	$height: $uni-img-size-base,
	$radius: $uni-border-radius-base,
	$obj-fit: cover,
	$obj-position: center center
) {
	width: $width;
	height: $height;
	border-radius: $radius;
	object-position: $obj-position;
	object-fit: $obj-fit;
}
// 图片样式 默认宽高为$uni-img-size-base 默认圆角为$uni-border-radius-circle 默认object-fit为cover 默认object-position为center center
@mixin img-circle(
	$width: $uni-img-size-base,
	$height: $uni-img-size-base,
	$radius: $uni-border-radius-circle,
	$obj-fit: cover,
	$obj-position: center center
) {
	@include img($width, $height, $radius, $obj-fit, $obj-position);
}
// padding
@mixin padding($value: 0) {
	padding: $value;
}
// margin
@mixin margin($value: 0) {
	margin: $value;
}
// 文字溢出显示省略号
@mixin textOverflow($line: 1, $lineHeight: 1.5) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: $line;
	overflow: hidden;
	line-height: $lineHeight;
}
// 文字溢出显示省略号 默认显示一行
@mixin ellipse($line: 1) {
	@include textOverflow($line);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

// 清除浮动
@mixin clearfix {
	&:after {
		clear: both;
		content: '.';
		display: block;
		height: 0;
		line-height: 0;
		overflow: hidden;
	}
	*height: 1%;
}
// /* placeholder */
@mixin placeholder($color: $placeholder-color) {
	// Firefox
	&::-moz-placeholder {
		color: $color;
		opacity: 1;
	}
	// Internet Explorer 10+
	&:-ms-input-placeholder {
		color: $color;
	}
	// Safari and Chrome
	&::-webkit-input-placeholder {
		color: $color;
	}

	&:placeholder-shown {
		text-overflow: ellipsis;
	}
}
// 设置元素的宽高 默认宽度为100% 默认高度为auto 默认圆角为0 默认背景色为透明
@mixin box($width: 100%, $height: auto, $radius: 0, $bgColor: transparent) {
	width: $width;
	height: $height;
	border-radius: $radius;
	background-color: $bgColor;
}

// 设置字体样式
@mixin font($size: $uni-font-size-base, $color: $text-color, $lineHeight: 1.5, $weight: normal) {
	font-size: $size;
	color: $color;
	line-height: $lineHeight;
	font-weight: $weight;
}

/* 画三角形 */
@mixin triangle($width: 10px, $direction: top, $color: $bgBlueLight) {
	border: $width solid transparent;
	@if ($direction == top) {
		// 上三角
		border-bottom-color: $color;
	}
	@if ($direction == bottom) {
		// 下三角
		border-top-color: $color;
	}
	@if ($direction == left) {
		// 左三角
		border-right-color: $color;
	}
	@if ($direction == right) {
		// 右三角
		border-left-color: $color;
	}
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

引入
.box { @include border-radius(10px); }