css之Postcss之颜色函数插件之"Unable to parse color from string"

使用以下 postcss 插件:

• postcss-cssnext
• postcss 嵌套
• postcss-color-function

在使用以下颜色函数时，我经常遇到以下错误。

无法解析字符串“l(-20%)”中的颜色

样式.css

@import 'variables.css'; 
//          ^-- contains: --blue: #3892e0; 
 
& a { 
    color: color(var(--blue), l(-20%)); 
    &:hover { 
        color: color(var(--blue), l(0%)); 
    } 
} 

Webpack 2 片段

{ 
    loader: 'postcss-loader', 
    options: { 
        plugins: [ 
            cssImport({ path: './src' }), 
            cssnext({ browsers: ['last 2 versions'] }), 
            colorFunction(), 
            nested(), 
        ], 
    } 
} 

请您参考如下方法:

该错误虽然不是描述性的，但表明不需要 ,。这遵循 future 的 CSS(提议)规范，但如果您来自任何其他语言，则可能会成为一个讨厌的习惯。

解决方案就是删除 , 的:

& a { 
    color: color(var(--blue) l(-20%)); 
    &:hover { 
        color: color(var(--blue) l(0%)); 
    } 
}