咨询：如何通过Mixin实现SASS条件变量的正确应用

嘿，我完全懂你想用Mixin来给Sass变量做条件赋值的需求——这种场景在做主题切换、响应式适配或者多环境样式定制时特别常见。之前的写法不规范没成功，大概率是没处理好变量作用域或者动态变量名的插值语法，下面给你几个实用的正确实现方案：

基础版：基于布尔值的条件赋值 #

如果只是简单的二选一判断，可以写一个通用Mixin，支持动态指定变量名和对应值：

// 定义通用的条件赋值Mixin
@mixin set-conditional-var($condition, $var-name, $val-when-true, $val-when-false) {
  @if $condition {
    #{$var-name}: $val-when-true !global; // !global 让变量作用于全局
  } @else {
    #{$var-name}: $val-when-false !global;
  }
}

// 使用示例：根据是否开启深色模式赋值主色调
$enable-dark-mode: true;

@include set-conditional-var($enable-dark-mode, $primary-color, #1a1a2e, #f7f7ff);

// 测试使用变量
body {
  background: $primary-color;
}

关键细节： #

• 用#{$var-name}插值语法动态指定变量名，这是实现“动态赋值不同变量”的核心。
• 如果不需要全局变量，去掉!global即可，变量只会在当前作用域生效（比如某个选择器内部）。

进阶版：多分支条件赋值 #

如果需要处理多种场景（比如多主题切换），可以在Mixin里嵌套@else if实现多分支判断：

// 多主题变量赋值Mixin
@mixin set-theme-vars($theme-type) {
  @if $theme-type == "light" {
    $bg-color: #ffffff !global;
    $text-color: #2d3748 !global;
    $accent-color: #3182ce !global;
  } @else if $theme-type == "dark" {
    $bg-color: #1a202c !global;
    $text-color: #e2e8f0 !global;
    $accent-color: #63b3ed !global;
  } @else if $theme-type == "warm" {
    $bg-color: #fffaf0 !global;
    $text-color: #744210 !global;
    $accent-color: #ed8936 !global;
  } @else {
    // 默认 fallback 值
    $bg-color: #f7fafc !global;
    $text-color: #4a5568 !global;
    $accent-color: #4299e1 !global;
  }
}

// 使用示例：切换到深色主题
@include set-theme-vars("dark");

// 应用样式
.page-container {
  background: $bg-color;
  color: $text-color;
  border-color: $accent-color;
}

响应式场景：基于媒体查询的条件赋值 #

如果要在不同屏幕尺寸下给变量赋值，Mixin也能轻松实现：

// 响应式变量赋值Mixin
@mixin responsive-var($var-name, $mobile-val, $tablet-val, $desktop-val) {
  // 默认移动端值
  #{$var-name}: $mobile-val;

  // 平板断点
  @media (min-width: 768px) {
    #{$var-name}: $tablet-val;
  }

  // 桌面端断点
  @media (min-width: 1024px) {
    #{$var-name}: $desktop-val;
  }
}

// 使用示例：设置不同尺寸下的基础字体大小
@include responsive-var($base-font-size, 14px, 15px, 16px);

// 应用样式
p {
  font-size: $base-font-size;
}

小提醒： #

尽量避免滥用!global，如果你的变量只在某个组件或模块内使用，把Mixin放在对应作用域里，去掉!global就能避免全局变量污染。

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