错误“在 \"...inear-gradient(\": 预期选择器后的 CSS 无效，为 \"{\"",答案

【问题标题】：Error "Invalid CSS after \"...inear-gradient(\": expected selector, was \"{\"",错误“在 \"...inear-gradient(\": 预期选择器后的 CSS 无效，为 \"{\"",
【发布时间】：2020-02-25 01:22:53
【问题描述】：

尝试编译 sass 我得到这个错误：（找不到错误的语法：）

/* {
   "status": 1,
   "file": "C:/Users/faido/Desktop/Productivity/sass 
   css/project/sass/main.sass",
   "line": 36,
   "column": 9,
   "message": "Invalid CSS after \"...inear-gradient(\": expected selector, 
   was \"{\"",
   "formatted": "Error: Invalid CSS after \"...inear-gradient(\": expected 
   selector, was \"{\"\n        on line 36 of sass/main.sass\n>>         
   linear-gradient( {\n\n   --------^\n"
   }
*/

对于此代码：

.header 
    background-image: linear-gradient( 
        to right bottom, 
        rgba( $color-primary-light, 0.8 ), 
        rgba( $color-primary-dark, 0.8 )
    ),
    url(../img/hero.jpg)

非常感谢任何帮助/见解

【问题讨论】：

标签： css npm sass compilation

【解决方案1】：

Sass 的缩进语法unfortunately does not support multiline expressions.

要修复它，您必须将所有内容放在一行：

.header 
    background-image:  linear-gradient(to right bottom, rgba($color-primary-light, 0.8), rgba($color-primary-dark, 0.8)) url(../img/hero.jpg)

【讨论】：

首先谢谢你。我是一个sass新手。有没有办法以更美观的方式构建这些。我讨厌不得不水平滚动...我必须切换到 scss 吗？
我不认为有，我个人更喜欢 Scss 语法而不是缩进的语法，幸运的是它确实支持多行，所以我想如果你想以更漂亮的方式来做，你会有换成。不过，这应该是微不足道的。