Sass变量传入Mixin后无法解析实际值，如何处理？

核心矛盾 #

Sass是预编译工具，所有逻辑判断（比如@if）都会在编译成CSS时执行完毕；而var(--flex-direction, row)是CSS自定义属性，属于浏览器运行时解析的内容。Sass编译时只会把它当成普通字符串处理，根本无法解析出它在浏览器里的实际值，所以你的Mixin里的条件判断自然没法基于实际方向生效。

解决方案 #

方案1：放弃CSS变量，用纯Sass变量控制（适合不需要动态修改方向的场景）

直接把Sass变量设为静态值，这样Mixin能在编译阶段拿到真实值做判断：

// 定义静态Sass变量
$flex-direction: row !default;

@mixin flex($direction) {
  display: flex;
  flex-direction: $direction;
  
  @if $direction == row {
    justify-content: flex-start;
  } @else if $direction == column {
    align-items: flex-start;
  }
}

// 调用时正常生效
@include flex($flex-direction);

方案2：保留CSS变量，将逻辑移到浏览器运行时（需要动态切换方向的场景）

既然Sass拿不到CSS变量的实际值，就把依赖方向的样式逻辑改成用CSS变量关联，或者预编译所有可能的方向样式，通过类名切换：

子方案2.1：预编译多方向类，通过类名切换

// 基础Flex样式
@mixin flex-base {
  display: flex;
}

// 生成不同方向的专属样式
@mixin flex-direction-styles($direction) {
  &.flex-#{$direction} {
    flex-direction: $direction;
    --flex-direction: #{$direction}; // 同步设置CSS变量（如果需要）
    
    @if $direction == row {
      justify-content: flex-start;
    } @else if $direction == column {
      align-items: flex-start;
    }
  }
}

// 预编译所有需要的方向
@include flex-direction-styles(row);
@include flex-direction-styles(column);

// 使用时通过添加类名控制：<div class="flex-base flex-row"></div>

子方案2.2：用CSS变量关联依赖属性

把需要根据方向变化的属性也设为CSS变量，在切换方向时同步更新这些变量：

$flex-direction: var(--flex-direction, row) !default;

@mixin flex($direction) {
  display: flex;
  flex-direction: $direction;
  // 用CSS变量定义依赖方向的属性
  justify-content: var(--justify-content, flex-start);
  align-items: var(--align-items, stretch);
}

// 需要切换为纵向时，同步更新关联变量
.flex-column {
  --flex-direction: column;
  --align-items: flex-start;
}

// 调用Mixin
@include flex($flex-direction);

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