//宽高 @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; } }