在 mixin 中使用局部 Sass 变量

Question

我有一堆定义用于 light/dark 主题的变量（两个单独的文件）：

$primary-1: red;
$primary-2: green;

而且我不想在消费它们时将它们全部声明两次。我写了一个 mixin 为我做作业：

@mixin assign-vars {
  --primary-1: #{$primary-1};
  --primary-2: #{$primary-2};
}

我想这样使用它：

@import 'assign-vars';

:root,
:root[data-theme='light'] {
  @import 'light-theme-variables';
  @include assign-vars;
}

:root[data-theme='dark'] {
  @import 'dark-theme-variables';
  @include assign-vars;
}

但这不起作用，因为我收到一条错误消息，指出 $primary-1 是一个未定义的变量。我怎样才能做到这一点而不必将所有声明都做两次？

Answer 1

我最终将变量移动到 map:

$light-vars: (
  $font-name: 'Some Font',
  $primary-1: red
);

$dark-vars: (
  $font-name: 'Some Other Font',
  $primary-1: green
);

并创建了一个帮助程序 mixin 以将它们分配给 CSS 个同名变量：

@mixin assign-map-properties($map) {
  @each $key, $value in $map {
    @if (type-of($value) == 'string') {
      --#{$key}: '#{$value}';
    }
    @else {
      --#{$key}: #{$value};
    }
  }
}

这让我完成了我需要的事情：

@import 'assign-map-properties';

:root,
:root[data-theme='light'] {
  @import 'light-vars';
  @include assign-map-properties($light-vars);
}

:root[data-theme='dark'] {
  @import 'dark-vars';
  @include assign-map-properties($dark-vars);
}

生成CSS:

:root,
:root[data-theme='light'] {
  --font-name: 'Some Font';
  --primary-1: red;
}

:root[data-theme='dark'] {
  --font-name: 'Some Other Font';
  --primary-1: green;
}

在 mixin 中使用局部 Sass 变量

Using local Sass variables in mixin

sass

scss-mixins