VSCodeでscssファイルがコンパイルされない

Question

実現したいこと

このサイトを参考に六角形の要素を敷き詰めたWebsiteの作成

前提

このサイトを参考に六角形の要素を敷き詰めたWebsiteの作成をしています。scssファイルが正しくコンパイルされない不具合が発生しました。

発生している問題・エラーメッセージ

エラーは発生しておりません。

style.scssファイルをコンパイルすると、style.css.mapとstyle.cssファイルが作られるが、style.cssファイルの中身が以下だけである。

/*# sourceMappingURL=style.css.map */

ちなみに

{"version":3,"sources":[],"names":[],"mappings":"","file":"style.css"}

該当のソースコード

#myHexGrid {
    $gridWidth:   20em;
    $gridHeight:  auto;
    $columnCount: 3;
    $rowCount:    2;
    $hexCount:    auto;
    $hexLayout:   row;
    $gridOrient:  vertical;
    $crop:        none;
    $cropFactor:  1;
    $hexContent:  auto;
    $hexSize:     auto;
    $hexMargin:   0.5em;
    $hexShape:    hexagon;
    $hexColor:    #48a999;
    $breakpoints: none;
    $images:      none;
  }

試したこと

sassmeisterに対象のscssファイルを記載しても、何も表示されなかったので、このscssファイルの中身に原因があるとは思うのですが、何が悪いのかよくわかりませんでしたので質問させていだきます。

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

Ruby Sass 3.7.4

Answer 1

該当のソースコード

本当にこれだけのコードであれば、結果は「何も出力されない」で正しいです。

$で始まる変数はSCSSの世界にしか存在しないものなので、変数定義そのものはCSSコンパイルしても何も出力されません。

これらの変数を使うSCSSを書きたい場合、同じファイル内で使うか、@useなどを使って連携する必要があります。

Comments

[maisumakun]

@importを使ったSCSS同士の連携は廃止された書き方です。当該コードはそれ以前に書かれて更新されていない状態ですので、ライブラリサイドも含めて抜本的に書き直す必要があります。

[Rivermouth]

ご回答ありがとうございます。
確かに変数だけ定義しても何も表示されないですね、、