Question

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

function factorial(inputNum) {
    let result = 1;
    while(inputNum) {
        result = result * inputNum;
        inputNum--;
    }
    return result;
}

function factorial(inputNum) { return new Promise(resolve => { let result = 1; const calcFactOneLevel = () => { result = result * inputNum; inputNum--; if(inputNum) { return process.nextTick(calcFactOneLevel); } resolve(result); } calcFactOneLevel(); } }由vue中的代码动态更改。如果我用.progress{ background-image: linear-gradient(to right, $start-color 0%, $start-color 50%, $end-color 50%, $end-color 100%); }编写样式，则无法使用预定义的scss颜色50%和:style="{}"

Answer 1

您应该在CSS模块下使用来自Interoperable CSS的:export块。

作为示例，请考虑以下给定的摘录，首先在已定义颜色（例如colors.scss）的sass文件中：

$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。

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

1 个答案: