ruby-on-rails - application.css で財団の scss で定義された変数を使用できますか?

Question

私のレールアプリケーションのアセットapplication.cssには、次の行があります

/*
 *= require foundation_and_overrides
 *= require_self
 *= require_tree .
 */

ul#mainmenu li {
    background-color: $mainColor;
}

foundation_and_overrides.scss次の変数を定義したファイルが含まれています

$mainColor: #eba10e;

しかし、この変数をapplication.cssファイルで直接使用しようとすると、 に変換されない#eba10eため、結果の css ファイルに次のような行が表示されます。

background-color: $mainColor;

私の質問ですが、application.css ファイルで変数を使用するにはどうすればよいですか?

Answer 1

いいえ、純粋な CSS は変数をサポートしていません。

ただし、名前を に変更すると機能しapplication.scssます。あとはSassでコンパイルします。CSS は常に有効な SCSS であるため、これは問題なく動作します。

さらに、@importステートメントの代わりにを使用する必要がrequireあるため、他のファイルは「SASS 方式」でインポートされます。