大前提

SCSS(=Sass)はCSSに「コンパイル」というのをしないとサイト上には読み込まれないです！！

(※コンパイル=変換という意味です)
まじでこれ大事なんですが、謎にネット上の記事に「.scss拡張子のファイルを作るだけで使えるで」とか書いてあって、戸惑ったので念のため書いておきます。

SCSSは(慣れたら)書くのを楽ちんにする為に導入するのであって、結局HTMLファイル内のheadにパスを通すのはcssファイルになります。

この説明でわかってもらえるかな..。

【コードを書くとき】
index.html　× main.scssでプログラミングライクに楽〜にcssを書く

【実際にサイトを確認する時】
①main.scssファイルをmain.cssファイルに変換する(コンパイルする)
②main.cssが読み込まれた状態のindex.htmlが表示される

どうやってコンパイルすればいいの？

色々とやり方がありますが、エディタソフトVScodeを使っている場合は自動コンパイルできるプラグインをインストールするのが一番簡単です。

他にも色々方法はありますが...

gulp.jsというNode.jsベースで作られたタスクランナー(※Webサイト構築に必要な処理をタスクとして自動化してくれるプログラム)や、だったり、があります。
が、導入がなかなかに難しいのでターミナルやコマンドに慣れていない方にはおすすめできませんし、Sassをコンパイルするだけならあまり導入するメリットはないかなと思います。

コンパイルしてみよう

①まずはVScodeの左のツールバーの下にある、拡張機能ボタンを押して、検索窓でsassと検索します

②Live Sass Compilerというのがあるのでそこをクリックしてinstallしてください

③インストールが終わるとVScodeのエディタの右下にWatch Sassが出現します。

④あとはscssファイルをコンパイルしたい時にこのWatch Sassをクリックするだけで、自動でコンパイルがされてcssファイルが読み込まれたHTMLをサイトで表示することができます〜！簡単！