如何从函数的字符串 return 值动态获取 sass 变量内容？

Question

这是我的初始上下文。

我从第三方收到一个 sass 变量列表，我无法更改此数据的形状：

$green-primary-1: green;
$green-secondary-2: aqua;
$green-secondary-3: grey;
$red-primary-1: green;
$red-secondary-2: aqua;
$red-secondary-3: grey;
$blue-primary-1: green;
$blue-secondary-2: aqua;
$blue-secondary-3: grey;
// data represented here is fake
// ...

然后我有一个函数，它包含一些逻辑，它 returns 前面列出的 sass 变量之一的名称字符串：

@function get_var_name($param1, $param2) {
  // logic
  // ...

  @return "green-secondary-2";
}

并且此函数在某些 sass 代码中用于（尝试）精确检索特定命名变量的内容：

span {
  color: #{#{get_var_name('param1', 'param2')}};
}

我期待这个输出

span {
  color: aqua;
}

相反，我得到了这个：

span {
  color: green-secondary;
}

请不要提供 css 变量方法作为答案，也不要为我的初始数据源或与问题上下文不同的内容映射解决方案。

我的强制输入是一些 sass 变量。我的强制输出是 css 属性使用这些变量名称动态处理。

我没有看到明显的东西吗？因为我真的无法让它发挥作用......而且我觉得它应该是一些愚蠢的东西。无论如何谢谢

Answer 1

这应该可以为您解决。不需要函数 return 一个 sass 变量

span { 
  color: $green-secondary;
}

编辑 - 选项 1 - 地图

但是，我不知道你为什么需要这个功能？你不能做这样的事情来实现你想要的吗？您可以在 Sass 上创建一个包含所有变体

的地图对象

$theme-colors: () !default;
$theme-colors: map-merge((
  "hello":      #fff,
  "world":      #000
), $theme-colors);

假设我想要 hello 值，我可以使用 map-get(variable_name, key)

map-get($theme-colors, "hello")

这将从那个 sass 变量的键值。

编辑 - 选项 2 - 使用 root

另一件需要注意的事情，您可以通过 :root 执行此操作，并且您可以从 css

中的根访问变量

span { 
  color: var(--hello);
}

:root {
  --hello: #fff
}

https://codepen.io/ciaabird/pen/PoKxZvz

Answer 2

截至今天，似乎插值仅在这些情况下才有可能：

样式规则中的选择器
属性声明中的名称
自定义属性值
CSS 规则
@扩展
普通 CSS @imports
带引号或不带引号的字符串
特殊功能
普通CSS函数名
大声评论

显然这不是问题所在。

如何从函数的字符串 return 值动态获取 sass 变量内容？

How to get sass variable content, coming dynamically from a string return value of a function?

function

sass