「... kground-color：」の後に無効なCSS：予期される表現（例：1px、太字）は「@グレー - ライト」でした

Question

こんにちは私は新しいプロジェクトでこのエラーメッセージが突然表示されています

"... kground-color："の後のCSSが無効です：期待される表現（例：1px、太字）は "@gray - 輝く;ここ

は私Application.scss

/* 
* This is a manifest file that'll be compiled into application.css, which will include all the files 
* listed below. 
* 
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's 
* vendor/assets/stylesheets directory can be referenced here using a relative path. 
* 
* You're free to add application-wide styles to this file and they'll appear at the bottom of the 
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS 
* files in this directory. Styles in this file should be added after the last require_* statement. 
* It is generally better to create a new file per style scope. 
* 
*/ 


@import "bootstrap-sprockets"; 
@import "bootstrap"; 
@import "home.scss" 

ですし、私はhome.scss

@gray-lightest: lighten(#000, 97.25%); 

body { 
    background-color: @gray-lightest; 
} 

を持っていると私は私のgemfile

gem 'sass-rails', '5.0.6' 
gem 'bootstrap-sass', '3.3.7' 
gem 'jquery-rails', '4.3.1' 
gem 'haml-rails' 

に私はすでに、SASSを見てきていますソリューションが、私はscssまたはCSSを使用したいと思います。私はバンドラーとすべての宝石を更新しようとしました。私の他のプロジェクトはうまくいっています。今回は間違って何ができたでしょうか？なぜこのエラーが発生していますか？ .scss拡張機能が動作していませんか？助けてくれてありがとう。

Answer 1

SCSSは、変数を設定するには、この構文をサポートしています。

$gray-lightest: lighten(#000, 97.25%); 

body { 
    background-color: $gray-lightest; 
} 

を