SASSコードはそのままだとCSSとして使えないため、通常使うCSSに変換(コンパイル)して使う必要があります。
即効解決なめっちゃ簡単な方法とVScodeを使う方法、ちょっと面倒くさそうだけど慣れたら最高なターミナルの3種類紹介します。
SassMeisterで一発解決
SassMeisterを使えばソフトなどインストールしなくても一発で解決できます。

するとこのような感じで左右に分かれた画面が出てきます。
左にSASSのコードを貼り付けると、右にCSSコードが出てきます。
変換は以上です。
超簡単ですね。
ウェブサイトちょっと見栄え良くしたいだけでプログラマーやデザイナーになるわけじゃないよ・・・という方はもうこの方法でいいんじゃないでしょうか。
VS Codeで変換する方法
VS Code(Visual Studio Codeの略)の場合はちょっと本格的にウェブサイト作る場合やプログラミングやってる方ならこちらの方法がいいかもしれません。
VS Codeのインストールがまだの方はこちらを参考にしてください。
拡張機能のインストール
さっそくSASSとLive Sass Compilerをインストールしてください。

検索欄より{sass}と入力。

SASSとLive Sass Compilerをインストール。
インストールすると画面の右下側に{Watch Sass}というボタンが登場するはずです。

テストフォルダとテストファイルを作成して拡張子を{.scss}で保存してください。

変換とLive編集
画面の右下側に{Watch Sass}というボタンを押すと、自動でCSSファイル(黄色い四角の枠)とCSS Mapというファイルが生成されます。

この状態ですと、SCSSファイルを編集すると自動でCSSファイルも書き換えられていきます。

自動更新を止める場合は{Watching}ボタンを押すと再び{Watch Sass}というボタンに切り替わり、自動更新をストップできます。
これでCSSファイルをリンクすればOKです。
ターミナルで変換する方法
まずはSASSの環境構築。
Rubyバージョンチェック
ターミナルを開いて
ruby -v
で念のためにRubyが入っていることを確認してください。
Xcodeインストール
xcode-select--install
でxcodeをインストール。
SASSインストール
sudo gem install sass
でインストール。
passwordの入力を求められますのでお使いのMacで設定したpasswordを入力。
GUIのように●が進んでいきませんが、ちゃんと入力されてるので安心して入力後にエンターを押してください。
Successfully installed sass (バージョン情報)
とでたらインストールは完了です。
ちなみにエラーがでて進めない方は次のコードを試してみてください。
sudo gem install sass -n/usr/local/bin
sass -v
で確認できます。
コンパイルコード
ターミナルからコンパイルするにはcd(移動)とls(確認)を使って目的の場所を指定しコンパイルを指示します。
cdとlsについてはこちらを参照してください。
sass --watchsass:css

これでCSSファイルが生成されました。
error No such file or directory @ rb_sysopen – sassと表示される場合はディレクトリの場所をしっかり確認してみてください。
まとめ
プログラマーじゃなくてちょっとサイト装飾したいだけ!という方は一つ目のウェブサービスでさくっと変換してしまってください。
ホームページ制作をしている方はVS Codeがやはり使いやすいかと思います。
他のプログラムなんかも使っている方はターミナルに慣れておいて損はないので、是非ターミナルで使いこなしてください。
ターミナルは慣れてしまうと癖になるので、難しそうに見えて実は一番やりやすかったりします。
こちらの記事もいかがですか?
プログラミングやテクノロジーに関する記事をまとめています!
Google検索ランキングで1位獲得実績ありの人気記事! M1 Mac以降の Python 環境構築 [完全保存版] ほぼ英語クラスの馴染みやすさが人気のPythonの全体像をほぼ1記事で理解できるのはこれ! まずはこれだけ Python基礎からサンプルプログラム いつもチェックする日課の記事やサイト、ページなどがあればセレニウムを使用してかなり細かく動作を自動化することができます。 Seleniumを使ってGoogle検索 ~ サイトの巡回までをプログラム Xサーバーをモデルにしています。
APIで自動トレードシステムなんかを構築したい場合は24時間働き続けてくれるスタイルが必須ですよね。 Xserver SSH接続の設定とAnaconda3のインストール
速度が早いのと対応も丁寧で老舗なのでおすすめのサーバーの一つです。
サーバーをこれから開設する方は是非VPNも契約しておきましょう。


日本のGPS衛星の技術はかなり高いのをご存知でしたか?!
誰でも無料で使える衛星電波、使わなきゃ損ですよね。 Python GPS関連の開発環境 & Google MAP APIを取得 コンパイル言語も忘れないで!
少し知っているだけで見える世界が全然変わってきます。 【環境構築】Rust M1 Mac / コンパイル言語