在css变量中使用scss变量

Question

这是我正在尝试的代码

@import "~variables";

:root
{
  --color-primary: map-get($colors, blue);
}

button {
  background: var(--color-primary);
}

在我拥有的变量中

$colors: (
        black : #000000,
        white : #FFFFFF,
        blue: : #888888
}

不幸的是，它不起作用，我的按钮不是蓝色。由于对scss进行了预编译，因此我认为这样做会很好。

Answer 1

您需要像这样逃避该scss函数：

$colors: (
        'black' : #000000,
        'white' : #FFFFFF,
        'blue' : #888888
);

:root {
  --blue: #{map-get($colors, 'blue')}
}

body {
  color: var(--blue);
}

更新： 基本上是string interpolation。