【即効解決】SASS 簡単にCSSに変換する方法3種類

ウェブデザイナーがCSSファイルを制作するのに近年だとほぼSASS（サス / サース）を使うのが一般的になってきました。
SASSコードはそのままだとCSSとして使えないため、通常使うCSSに変換（コンパイル）して使う必要があります。
即効解決なめっちゃ簡単な方法とVScodeを使う方法、ちょっと面倒くさそうだけど慣れたら最高なターミナルの3種類紹介します。

SassMeisterで一発解決

SassMeisterを使えばソフトなどインストールしなくても一発で解決できます。

SassMeister（外部サイト）

するとこのような感じで左右に分かれた画面が出てきます。

左にSASSのコードを貼り付けると、右にCSSコードが出てきます。

変換は以上です。

超簡単ですね。

ポイント海外のサイトなんかでもフリーで使えるCSSやJS素材が落ちていますが、ほとんどの場合でSASSで記述されています。
ウェブサイトちょっと見栄え良くしたいだけでプログラマーやデザイナーになるわけじゃないよ・・・という方はもうこの方法でいいんじゃないでしょうか。

VS Codeで変換する方法

VS Code（Visual Studio Codeの略）の場合はちょっと本格的にウェブサイト作る場合やプログラミングやってる方ならこちらの方法がいいかもしれません。

VS Codeのインストールがまだの方はこちらを参考にしてください。

M1 Mac以降の Python 環境構築 [完全保存版]

拡張機能のインストール

さっそくSASSとLive Sass Compilerをインストールしてください。

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

ポイント二種類ありますが、『Glenn Marks』さんのバージョンでOKです。

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が入っていることを確認してください。

通常Macにはデフォルトでインストールされており、バージョン情報が表示されるはずです。

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についてはこちらを参照してください。

Mac備忘録 / ターミナルでよく使うコマンドリスト

sass --watchsass:css

これでCSSファイルが生成されました。

error No such file or directory @ rb_sysopen – sass

と表示される場合はディレクトリの場所をしっかり確認してみてください。

まとめ

プログラマーじゃなくてちょっとサイト装飾したいだけ！という方は一つ目のウェブサービスでさくっと変換してしまってください。

ホームページ制作をしている方はVS Codeがやはり使いやすいかと思います。

他のプログラムなんかも使っている方はターミナルに慣れておいて損はないので、是非ターミナルで使いこなしてください。

ターミナルは慣れてしまうと癖になるので、難しそうに見えて実は一番やりやすかったりします。

こちらの記事もいかがですか？
プログラミングやテクノロジーに関する記事をまとめています！

当スタジオでのアクセスNO1！
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 / コンパイル言語