ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

VSCodeでSassのコンパイル環境(CSSに変換)を一瞬で構築する方法

ツール関連
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

→ セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

SassをCSSにコンパイル(変換する)簡単な方法を知りたい。

Rubuとか他のツールを使うのが面倒。。。

何か他に簡単なコンパイルの方法はないかな?分かりやすく解説してほしい!

今回の記事では、SassのコードをCSSにコンパイル(変換する)するとっても簡単な方法をご紹介します!

一般的にはSassを使うには環境を構築する必要があり、Rubyをインストールしたり、他にツールを使用したりして、SassからCSSに変換します。

しかし、初心者の方は少し難易度が高く、もっと簡単にSassを使える方法が知りたいでしょう!

  • Rubyや他のツールを用いることなく一瞬でSassの環境を作る
  • この記事を2分読むだけですぐにSassが使えるようになる

この記事を読むとこのようなメリットが得られます!

結論から言うと、VSCodeに「Live Sass Compiler」と言う拡張機能をインストールするだけです!(※VSCodeを使っている人が対象)

最強エディタVSCodeとは?特徴からインストール、使い方まで解説!

こんな方にオススメ
  • Sassのコンパイル方法(CSSに変換)が分からない方
  • 簡単にSassを使う環境を構築したい方
  • VSCodeを使っている方
スポンサーリンク

そもそもSassとは?基礎知識

Sass(サス)とは、一言で言うと、、、

「CSSをより効率的早くに書ける言語です!」

つまりSassとCSSは、同じ意図で使われ密接な関係があります。

SassはSyntactically Awesome StyleSheet を略した言葉で、

  • Syntactically = 構文的に
  • Awesome =  驚くべき
  • StyleSheet = スタイルシート

と言う意味になり、具体的に言うと「変数や関数(構文的に)を使うことによって、驚くくらいに早くスタイルシートを作ることができる!」と言う解釈でいいでしょう!

つまりイメージ的には、CSSでは20分かかったスタイリングがSassを使うことにより5分でスタイリングできてしまうと言うことです!

Sassを使うメリット、使い方はこちらの記事をどうぞ!

VSCodeでSassのコンパイル環境を構築する方法

この方法を使えば、たったの3分程度でSassをコンパイルする環境が構築できます!

Sassの環境構築の手順
  1. VSCodeを開く
  2. Live Sass Compilerをインストール
  3. WatchSassをクリック
  4. Sassをコーディング
  5. 保存する
  6. CSSが生成される

やばい!超簡単!!

たったのこれだけで、Sassのコンパイルができてしまいます!

VSCodeを使ってない方はこちらのVSCodeホームページからインストールしましょう!

Visual Studio Code – Code Editing. Redefined

Hiko
Hiko

VSCodeは僕が超オススメする、機能性抜群のエディタです!

スポンサーリンク

1. Live Sass Compilerをインストール

まず始めにVSCodeを開いて、 Live Sass Compilerの拡張機能をインストールします。

  1. サイドバーのExtensionsをクリック
  2. 検索バーにlive sass compilerと検索
  3. Installをクリック

この作業だけで、あなたのVSCodeにLive Sass Compilerがインストールされました!

2.WatchSassをクリック

インストールが完了したら、実際にmain.sass(main.scss)ファイルを作ってSassをCSSにコンパイルしてみましょう!

まず始めに、好きな名前の.sass(.scss)拡張のファイルを作ります。

先ほど、Live Sass Compilerをインストールしたので、下の青のバーに「Watch Sass」と項目が追加されているので、それをクリックします。

Watch Sassのボタンをクリックして、Sassを記述→保存すると、自動更新してCSSファイルを生成してくれます!

3.Sassをコーディング

実際にSass(Scss)をいつものようにコーディングしていきます。

そして、ファイルを保存すると、自動的にCSSファイルがコンパイルされます。

main.sassをコンパイルすれば、main.cssが作成され、content.scssをコンパイルすれば、content.cssが自動で生成されます!

Sassを編集する場合も、下のバーの「Watch Sass」をクリックし、Sassを記述し保存すれば、CSSに反映されます!

Watch Sass ボタンをクリックしている間は、Sass(Scss)とCSSファイルが連動しているので、全く同じデザイン処理のファイルが2つできるイメージ!

VSCodeでSassのコンパイル環境 まとめ

ネコ君
ネコ君

とっても簡単!面倒な環境構築をボタン一つでできるからとっても便利だね!

いかがでしたでしょうか!

VSCodeは使っている方はもちろん、VSCodeを使っていない方はこの機会に、VSCodeに乗り換えて、Sass(Scss)を使ってみてはいかがでしょうか?

この方法を使うメリットは、画面1つでSassのコンパイルが完結すると言う点です!

ぜひ、この記事を参考にVSCodeでSassのコンパイル環境を構築してみてはいかがでしょうか!

最後までご覧いただきありがとうございました!

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
ツール関連
HikoPro Blog

コメント

タイトルとURLをコピーしました