sass相关

vue3以下
/deep/
vue3
::deep
css
>>>
总结：加/deep/，::deep，>>>是为了当前覆盖组件样式，并且不会影响其他文件
sass中添加scoped
样式私有化，只作用于当前文件
vue3配置全局sass
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "~@/styles/main.scss";`,
      },
    },
  },
};

$border_solid:solid;
//flex布局
@mixin flex($w: center, $v: center) {
  display: flex;
  justify-content: $w;
  align-items: $v;
}
//内联元素居中
@mixin inline($w: null,$h: null){
  width: $w;
  height: $h;
  margin:0 auto;
  display:block;
}
//定位
//绝对定位
@mixin absolute($l:null,$r:null,$t:null){
  position: absolute;
  left: $l;
  right: $r;
  top: $t;
  @if $l != 50% and $t == 50%{
    transform: translateY($t * -1);
  } @else if $l == 50% and  $t != 50%{
    transform: translateX($l * -1);
  }@else if $l == 50% and  $t == 50%{
    transform: translate($l * -1,$t* -1);
  }
}
@mixin font($s: null,$f: null, $w: null, $c: null, $ls: null,$ta: null) {
  font-size: $s;
  font-family: $f;
  font-weight: $w;
  color: $c;
  letter-spacing: $ls;
  text-align: $ta;
}
//底部固定
@mixin fixedBootom($p:null,$bg:null){
  width: -webkit-fill-available;
  padding: $p;
  position: fixed;
  bottom: 0;
  background: $bg;
}
//白色包围框
@mixin bgWhiteItem($t: null,$l: null,$b: null,$r: null){
  background: #ffffff;
  padding: $t $l $b $r;
  border-radius: 18rpx;
}
@mixin container($l: null,$r: null){
  background: #F2F4F5;
  height: 100%;
  padding-left: $l;
  padding-right: $r;
  position: relative;
}
//按钮
@mixin btn($w: null,$h: null,$lh: null,$bg: null,$br: null,$f: null,$fw: null,$c: null,$b: null){
  width: $w;
  height: $h;
  line-height: $lh;
  background: $bg;
  border:$b;
  border-radius: $br;
  font-size: $f;
  font-weight: $fw;
  color: $c;
  text-align: center;
}
//超出打点
@mixin exceedWidth($w: null){
  width: $w;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
//文字等宽
@mixin halving($w: null,$fs: null,$c: null,$fw: null){
  width: $w;
  text-align: justify;
  font-size: $fs;
  color: $c;
  font-weight: $fw;
  line-height: 0;
  &:after{
    content: '';
    width: 100%;
    display: inline-block;
  }
}
 
//常用图案绘制
//不传角度为+号 加角度为x
@mixin basicSymbol($w:null,$h:null,$bg:null,$angle:null){
  position: relative;
  width: $w;
  height: $h;
  background: $bg;
  @if $angle{
    transform: rotate($angle);
  }
  &:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: $w;
    height: $h;
    background: $bg;
    @if $angle{
      transform: rotate($angle * 2);
    } @else {
      transform: rotate(90deg);
    }
  }
}
 
//三角形
@mixin triangle($w:null, $h:null,$c:null,$l:null,$r:null,$t:null,$b:null){
  $color:$c;
  $transparent:transparent;
  @if $l{
    border-left: $w $border_solid $color;
    border-right: $w $border_solid transparent;
    border-top: $h $border_solid transparent;
    border-bottom: $h $border_solid transparent;
  } @else if $r{
    border-right: $w $border_solid $color;
    border-left: $w $border_solid transparent;
    border-top: $h $border_solid transparent;
    border-bottom: $h $border_solid transparent;
  }@else if $t{
    border-top: $h $border_solid $color;
    border-right: $w $border_solid transparent;
    border-left: $w $border_solid transparent;
    border-bottom: $h $border_solid transparent;
  }@else if $b{
    border-bottom: $h $border_solid $color;
    border-left: $w $border_solid transparent;
    border-right: $w $border_solid transparent;
    border-top: $h $border_solid transparent;
  }
}
//伪类横线
@mixin vLine($w: null,$h: 100%,$l:null,$r:null,$bg: null) {
  position: relative;
  &::before{
    content: "";
    position: absolute;
    width: $w;
    height: $h;
    background: $bg;
    left: $l;
    right: $r;
  }
}