Vue3中如何在SCSS标签绑定Props调用Mixin？

问题场景 #

项目基于vue@3.2.40开发，样式使用SCSS。现有一个tooltip组件的容器：

<div ref="targetRef" v-show="isVisible" class="tooltip">
   <slot></slot>
</div>

组件通过Props接收alignment参数控制tooltip的对齐方向：

const props = defineProps({
  text: String,
  alignment: {
    type: String as PropType<Alignment>,
    default: 'top',
  },
})

尝试直接在SCSS中通过v-bind将Props传入mixin，但写法无效（@debug无输出）：

<style lang="scss" scoped>    
    .tooltip {
      $alignment: v-bind(alignment);
      @include triangleWithAlignment($alignment);  
    }
</style>

目前只能通过给容器添加动态类:class="-${alignment}"，然后逐个编写类选择器引入mixin：

&.-top {
  @include triangleWithAlignment(top);
}
&.-bottom {
  @include triangleWithAlignment(bottom);
}
// 其余对齐方向需重复上述代码

该方式可行但代码冗余，需要更优实现方案。

优化方案 #

方案1：SCSS循环批量生成样式类 #

利用SCSS的@each循环批量生成所有对齐方向对应的样式类，避免重复代码：

1. 定义所有支持的对齐方向列表（根据你的Alignment枚举值调整）：

$alignments: top, bottom, left, right;

2. 在.tooltip选择器下通过循环生成对应样式：

<style lang="scss" scoped>
$alignments: top, bottom, left, right;

.tooltip {
  // 此处可添加tooltip的基础样式
  
  @each $align in $alignments {
    &.-#{$align} {
      @include triangleWithAlignment($align);
    }
  }
}
</style>

后续只需维护$alignments列表即可，无需手动编写每个对齐方向的类选择器。

方案2：改造Mixin兼容CSS变量 #

如果希望直接通过Props动态传递对齐方向，可借助CSS变量实现，但需要改造原有triangleWithAlignment mixin：

1. 在组件模板中将alignment绑定为CSS变量：

<div 
  ref="targetRef" 
  v-show="isVisible" 
  class="tooltip"
  :style="{ '--alignment': alignment }"
>
   <slot></slot>
</div>

2. 改造mixin，使其支持读取CSS变量并生成对应样式：

@mixin triangleWithAlignment() {
  // 读取CSS变量，默认值为top
  $default-align: top;
  --align: var(--alignment, #{$default-align});

  // 根据对齐方向编写样式逻辑，示例如下（需根据原有mixin逻辑调整）：
  &::after {
    content: '';
    position: absolute;
    @if var(--align) == top {
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      border-top: 8px solid #fff;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
    } @else if var(--align) == bottom {
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      border-bottom: 8px solid #fff;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
    }
    // 其余方向逻辑同理
  }
}

改造后无需添加动态类，可直接在.tooltip类中引入mixin：

<style lang="scss" scoped>    
.tooltip {
  @include triangleWithAlignment();  
}
</style>

内容的提问来源于stack exchange，提问作者bdemirka