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

SassMeisterで一発解決
VS Codeで変換する方法
- 拡張機能のインストール
- 変換とLive編集
ターミナルで変換する方法
まとめ

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

まだサイトを作っていないよという方は以下の記事も参考にしてください。

なぜWEBサイトを持つ必要がありますか？noteやアメブロじゃダメな理由

まずはここから〜【初心者必見】エックスサーバーを契約したら最初にやるべき2つのこと

エックスサーバーでメールアドレスの設定する方法

これでWEBサイト完成〜【超やさしく解説】エックスサーバーでWordPressをインストールする方法

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も契約しておきましょう。

レンタルサーバーエックスサーバー

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

プロフィール

こうたろう

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