Sass中动态拼接@include混合指令名称报错，寻求解决方法

我明白你想实现的是根据RTL/LTR方向动态调用对应的圆角混合指令，虽然你已经改用静态调用的方案，但咱们来聊聊怎么搞定最初的动态调用难题～

首先先还原一下你的场景代码，方便理解问题：

$direction: ltr; // 可切换为rtl
$left: left;
$right: right;

@if $direction == rtl {
  $left: right;
  $right: left;
}

// 你最初尝试的写法，会报错
// @include border-#{$right}-radius(0);

为什么直接拼接变量会报错？ #

Sass的@include指令在语法解析阶段就需要确定要调用的混合指令名称，直接用border-#{$right}-radius这种变量拼接的写法，会被当成一个未定义的混合指令名，而不是动态解析成border-left-radius或border-right-radius，所以才会触发错误。

正确的动态调用方法：使用call()函数 #

Sass 3.3及以上版本提供了call()函数，它可以接受一个字符串形式的混合指令名称，再传递对应的参数，完美解决动态调用的问题。

示例代码如下：

// 假设你已经有预定义的这两个混合指令
@mixin border-left-radius($radius) {
  border-left-radius: $radius;
  -webkit-border-left-radius: $radius;
}

@mixin border-right-radius($radius) {
  border-right-radius: $radius;
  -webkit-border-right-radius: $radius;
}

$direction: rtl;
$left: left;
$right: right;

@if $direction == rtl {
  $left: right;
  $right: left;
}

// 用call()动态调用混合指令
@include call("border-#{$right}-radius", 0);

当$direction设为rtl时，$right会被赋值为left，call()就会自动解析并调用border-left-radius(0)，完全符合你的预期。

备选思路：封装统一的混合指令（不过你提到不想创建动态混合指令，所以这个仅作补充） #

如果你愿意新增一个封装层，也可以写一个统一的混合指令来分发调用：

@mixin border-side-radius($side, $radius) {
  @if $side == left {
    @include border-left-radius($radius);
  } @else if $side == right {
    @include border-right-radius($radius);
  }
}

// 调用时直接传变量
@include border-side-radius($right, 0);

不过你已经改用静态调用的方案，这个可能不是你最想要的，但可以作为场景扩展参考。

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