SASS / SCSS：从字符串/名称插入变量

Question

是否可以通过名称获取变量？

我尝试构建以下函数，但它没有按预期工作...

@function variable-lookup($variable, $suffix: "") {
  $value: null;
  @if ($suffix != "" and global-variable-exists($variable+"-"+$suffix)) {
    $value: #{$variable+"-"+$suffix};
  }
  @else if (global-variable-exists($variable)) {
    $value: #{$variable};
  }
  @return $value;
}

这是一个如何使用它的例子：

$primary: #000;
$primary-hover: blue;

a {
  color: variable-lookup("primary", "base");

  &:hover {
    color: variable-lookup("primary", "hover");
  }
}

当我想围绕这个“变量查找”函数编写一堆特定于上下文的 shorthand 包装函数时，真正的力量就会发挥出来。

有什么实现方法吗？

Answer 1

尝试插入 #{$variable+"-"+$suffix} 以给出值 primary-base 并进一步尝试获取相同变量名称的值是 不可能的。 primary-base 已经是一个值，不能解释为变量名。那种事情可能会导致很多混乱。

对于您想完成的事情，您最好使用 map 并检查该地图中的 key

$colours: (
  'primary': red,
  'primary-base': blue
);

@function variable_lookup($colour, $suffix: '') {
  $value: null;
  @if ( $suffix != '' and map-has-key($colours, unquote($colour+'-'+$suffix)) ) {
    $value: map-get($colours, unquote($colour+'-'+$suffix));
  } @else if ( map-has-key($colours, unquote($colour)) ) {
    $value: map-get($colours, unquote($colour));
  }
  @return $value;
}

div {
  color: variable-lookup(primary, base);
}

p {
  color: variable-lookup(primary);
}

这编译为以下 css

div {
  color: blue; }

p {
  color: red; }

您的代码将颜色存储为变量，但我在 maps

中将这些名称用作 keys

这允许使用 map-has-key 方法模拟检查代码中的变量。如果 returns 为真，则 key 存在，我们可以使用 map-get

获得在本例中为颜色的值

更新的答案
解决您在评论中提出的问题的一种方法是定义变量并将它们用作地图中的值

$primary: #fff;
$warning: yellow; 

$colours: ( primary: $primary, 
            primary-hover: darken($primary, 5%), 
            secondary: $warning, 
            secondary-hover: darken($warning, 5%) );

另一种方法是遍历两个列表并将颜色映射到样式

$colours: ();

$list: primary success warning; //map primary to blue, success to green and so on
$shades: blue green yellow;

@for $i from 1 through length($list) {
  $key: nth($list, $i);
  $value: nth($shades, $i);
  $colours: map-merge($colours, ($key: $value));
  $colours: map-merge($colours, (unquote($key+'-hover'): darken($value, 5% )) );
}

@debug $colours // (primary: blue, primary-hover: #0000e6, success: green, success-hover: #006700, warning: yellow, warning-hover: #e6e600)

variable_lookup 功能保持不变。

希望能对您有所帮助

SASS / SCSS：从字符串/名称插入变量

SASS / SCSS: Interpolate variable from string / name

variables

concatenation

sass

string-interpolation