【即効解決】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がやはり使いやすいかと思います。

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

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

この記事もいかがですか?

【環境構築】Rust M1 Mac / コンパイル言語

【環境構築】スマートコントラクト開発

GitHub で人気のプログラミング言語とは? WordCloudで視覚化

Kotaro
Kotaro
服部 洸太郎
音大を卒業後ピアニストとして活動。
自身のピアノトリオで活動後北欧スウェーデンにてシンガーアーティストLindha Kallerdahlと声帯とピアノによる即興哲学を研究。
その後ドイツへ渡りケルンにてAchim Tangと共に作品制作。
帰国後、金田式電流伝送DC録音の名手:五島昭彦氏のスタジオ「タイムマシンレコード」にアシスタントとして弟子入りし、録音エンジニアとしての活動開始。
独立後、音楽レーベル「芸術工房Pinocoa(現在はKotaro Studioに統合)」を立ち上げ、タンゴやクラシックなどのアコースティック音楽作品を多数プロデュース。
その後、秋山庄太郎氏後継の写真スタジオ「村上アーカイブス」でサウンドデザイナー兼音響担当として映像制作チームに参加。
村上宏治氏の元で本格的に写真、映像技術を学ぶ。
祖父母の在宅介護をきっかけにプログラムの世界に興味を持ち、介護で使えるプログラムをM5Stackを使って自作。
株式会社 ジオセンスの代表取締役社長:小林一英氏よりプログラムを学ぶ。
現在はKotaro Studioにてアルゼンチンタンゴをはじめとした民族音楽に関する文化の研究、ピアノ音響、さらに432hz周波数を使った癒しのサウンドを研究中。
スタジオでは「誰かのためにただここに在る」をコンセプトに、誰がいつ訪れても安心感が得られる場所、サイトを模索中。