uniapp使用scss mixin抽离css常用的公共样式

1、编写通用scss样式文件

// 通用 Flex Mixin
@mixin flex($direction: row, $justify: flex-start, $align: stretch, $wrap: nowrap) {display: flex;flex-direction: $direction;justify-content: $justify;align-items: $align;flex-wrap: $wrap;
}// 水平居中
@mixin flex-center-horizontal {@include flex(row, center, center);
}// 垂直居中
@mixin flex-center-vertical {@include flex(column, center, center);
}// 文本省略号
@mixin ellipsis($lines: 1) {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: $lines; // 多行省略-webkit-box-orient: vertical;
}// Clearfix (清除浮动)
@mixin clearfix {&::after {content: "";display: table;clear: both;}
}// Box Shadow (阴影效果)
@mixin box-shadow($x: 0px, $y: 4px, $blur: 6px, $color: rgba(0, 0, 0, 0.1)) {box-shadow: $x $y $blur $color;
}// Border Radius (圆角样式)
@mixin border-radius($radius: 4px) {border-radius: $radius;
}// Transition (过渡动画)
@mixin transition($properties: all, $duration: 0.3s, $easing: ease) {transition: $properties $duration $easing;
}// 绝对定位居中
@mixin absolute-center {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

2、在uni.scss引入上述scss文件

3、在页面上使用，需加上lang=scss声明

编译后的效果：