SASSコードはそのままだとCSSとして使えないため、通常使うCSSに変換(コンパイル)して使う必要があります。
即効解決なめっちゃ簡単な方法とVScodeを使う方法、ちょっと面倒くさそうだけど慣れたら最高なターミナルの3種類紹介します。
まだサイトを作っていないよという方は以下の記事も参考にしてください。
なぜWEBサイトを持つ必要がありますか?noteやアメブロじゃダメな理由
まずはここから〜【初心者必見】エックスサーバーを契約したら最初にやるべき2つのこと
これでWEBサイト完成〜【超やさしく解説】エックスサーバーでWordPressをインストールする方法
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も契約しておきましょう。


少し知っているだけで見える世界が全然変わってきます。 【環境構築】Rust M1 Mac / コンパイル言語
プロフィール

-
音大を卒業後ピアニストとして活動。
日本で活動後北欧スウェーデンへ。
アーティストLindha Kallerdahlと声帯とピアノによる即興哲学を研究。
その後ドイツ・ケルンに渡りAchim Tangと共にアルバム作品制作。
帰国後、金田式DC録音の第一人者:五島昭彦氏のスタジオ「タイムマシンレコード」にアシスタントとして弟子入り。
独立後音楽レーベル「芸術工房Pinocoa(現:Kotaro Studio)」を結成。
タンゴやクラシックなどアコースティック音楽作品を多数プロデュース。
大阪ベンチャー研究会にて『芸術家皆起業論~変化する社会の中、芸術家で在り続けるために』を講演。
その後、秋山庄太郎氏後継の写真スタジオ「村上アーカイブス」でサウンドデザイナー兼音響担当として映像制作チームに参加。
村上宏治氏の元で本格的に写真、映像技術を学ぶ。
祖父母の在宅介護をきっかけにプログラムの世界に興味を持ち、株式会社 ジオセンスの代表取締役社長:小林一英氏よりプログラムを学ぶ。
現在はKotaro Studioにて『あなたのためのアートスタジオ』音と絵をテーマに芸術家として活動中。
2023年より誰かのための癒しの場所『Curanz Sounds』をプロデュース。
Daily2023年9月26日北海道札幌旅〜すすきのと琴似でジンギスカンとラーメン
Daily2023年9月20日こなやオーディオ祭:ヘンジントンスピーカーの試聴会
Lens library2023年8月26日NOKTON 21mm F1.4 Aspherical の実力 a7RⅡにて試写
Daily2023年8月12日【マイクアンプ比較テスト】Sound Devices のマイクアンプを試す