Newer
Older
operation_web / src / assets / css / mixin.scss
@田松 田松 on 11 Jan 2021 1 KB +++配置管理-项目管理
//宽高
@mixin wh($width,$height){
	width:$width;
	height:$height;
}

//字体大小,颜色
@mixin sc($size,$color){
	color:$color;
	font-size:$size;
}

//高,行高
@mixin hl($height,$lineHeight){
	height:$height;
	line-height:$lineHeight;
}

//定位上下左右居中
@mixin center{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

//定位上下居中
@mixin ct{
	position:absolute;
	top:50%;
	transform: translateY(-50%);
}

//定位左右居中
@mixin cl{
	position:absolute;
	left:50%;
	transform: translateX(-50%);
}

//固定定位上下左右居中
@mixin cf{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

//flex布局及其子元素在水平方向的对齐方式
@mixin fj($type:space-between){
	display:flex;
	justify-content:$type;
}

//flex布局及其子元素在垂直方向的对齐方式
@mixin fa($type:center){
	display:flex;
	align-items:$type;
}

//flex布局方向
@mixin fd($type:column){
	display:flex;
	flex-direction:$type;
}

//flex布局及其子元素在水平垂直方向的对齐方式
@mixin faj($type:center,$newtype:space-between){
	display:flex;
	-webkit-box-align:$type;
	align-items:$type;
	-webkit-box-pack:$newtype;
	justify-content:$newtype;
}

//flex布局及其子元素在水平垂直方向的对齐方式
@mixin fdaj($type:center,$newtype:space-between,$row:column){
	display:flex;
	flex-direction:$row;
	-webkit-box-align:$type;
	align-items:$type;
	-webkit-box-pack:$newtype;
	justify-content:$newtype;
}

//背景样式相关
@mixin bg($pos:left center,$w:100%,$h:100%,$repeat:no-repeat){
	background-repeat: $repeat;
	background-position: $pos;
	background-size: $w $h;
}

/** 
	*	溢出省略号
	* @param {Number} 行数
*/
@mixin textover($rowCount:1){
	@if $rowCount <= 1 {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	@else {
		display: -webkit-box;
		min-width: 0;
		text-overflow: ellipsis;
		-webkit-line-clamp: $row;
		overflow : hidden;
		-webkit-box-orient: vertical;
	}
}