具有动态百分比的scss中的线性梯度

Question

我想用背景线性渐变创建一个进度条，并在vue中使用scss中的预定义主题颜色。如：

.progress{
  background-image: linear-gradient(to right, $start-color 0%, $start-color 50%, $end-color 50%, $end-color 100%);
}

50%由vue中的代码动态更改。如果我在:style="{}"中编写样式，那么我就不能使用预定义的scss颜色$start-color和$end-color

Answer 1

您应该使用CSS模块下的Interoperable CSS中的:export块。

作为一个例子，考虑下面给出的提取，首先在你的sass文件中定义了颜色（比如colors.scss）：

$primaryColor: #fcf5ed;
$secondaryColor: #402f2b;

:export {
    primaryColor: $primaryColor;
    darkColor: $secondaryColor;
}

使用该设置以及您的样式加载器（您当前必须设置），您可以像在Vue应用程序中的常规js模块一样导入文件：

import colorVariables from 'colors.scss'

colorVariables.primaryColor // => Will now have the value of the color as a string.

现在您可以使用Vue的：style绑定来定义线性渐变。您可以在以下链接中阅读有关export的更多信息：CSS模块下的Interoperable CSS - :export。