scssの使い方(継承)

前提・実現したいこと

scssを使って色の継承をおこないたいです。
変数の書き間違い、継承したいscssの文頭に@useを書いていない(@importは廃止予定とのことなので使っていません)、いろいろ考えて調べてみたものの解決せず…2時間経過した当たりから先輩方の知恵をお借りしようと思って質問しました。

発生している問題・エラーメッセージ（f12で表示）

header {
    width: 100%;
    min-height: 15%;
    padding: 10px 4% 10px;
    background-color: siteColors.$headBoxColor;<-ここでエラー、線が引かれて無効化されています。
}

該当のソースコード

style.scss

scss
1@use "siteColors" ;
2
3
4*, *:before, *:after {
5    -webkit-box-sizing: border-box;
6    box-sizing: border-box
7}
8
9
10body {
11    margin: 0;
12    padding: 0;
13    background-color: siteColors.$backColor;
14    z-index:2;
15}
16

_siteColors.scss

scss
1/*背景*/
2$backColor: rgb(244, 244, 244) ;
3

試したこと

上記の通りです。

補足情報（FW/ツールのバージョンなど）

ファイルは同じフォルダに保存してあります。

m.ts10806

2021/02/12 00:13

CSSがわかる人すべてがSCSSがわかるわけではないので、タグの追加を https://teratail.com/tags/Sass

miyabi_pudding

2021/02/12 01:05 編集

線が引かれるというのはどういう状況でしょうか？エディタ上の話ならば、キャプチャ画像を質問本文に置いた方がいいかもしれません。もし上記の状況ならば、可能性としては、エディタの方が、 @use構文に対応していない可能性が高いです。

miyabi_pudding

2021/02/12 01:07 編集

もしエディタで対応していないのであれば、 @use構文に、プラグインを入れて対応できるならそうし、それでもできなければ、エディタ上は目をつぶり、気にせずコンパイルすればいいと思います。 @use構文は、けっこう新しいもののため、対応していない環境はまだ多くあります。

shakena

2021/02/12 12:59

ご指摘ありがとうございます！ご迷惑をおかけしてすみません…。タグの追加をおこないます！

行動規範の内容に同意します

回答2件

提示されたコードを、macのコマンドラインツールsassでコンパイルすると普通に以下のcssが出力されました。
何か環境の設定など、コードではない問題かと思われますが。

css
1@charset "UTF-8";
2/*背景*/
3*, *:before, *:after {
4  -webkit-box-sizing: border-box;
5  box-sizing: border-box;
6}
7
8body {
9  margin: 0;
10  padding: 0;
11  background-color: #f4f4f4;
12  z-index: 2;
13}
14

bash
1$ brew install sass/sass/sass
2$ sass --version
31.32.7

投稿2021/02/12 01:28

t_obara

総合スコア5488

shakena

2021/02/12 13:09

回答ありがとうございます！そして申し訳ありません…自己解決いたしました…どうやら問題はコンパイラだったようです… Windowsでやっていまして、その場合コンパイラを別途いれなければならないということに今日気づきました。ですが回答や指摘をもらったおかげで気づくことができたのは言うまでもありません。初歩的な間違いにちゃんと気づけるように、今回のことはちゃんと胸に刻んでいこうと思います。最後になりますが、貴重な時間を割いて私の質問に答えていただき、本当にありがとうございました！

行動規範の内容に同意します