HikoPro Blog

IT・テクノロジーで生活と仕事をもっと豊かに

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

約6分
About|HikoPro

About|HikoPro

1998年生まれ|ITライフクリエイター
Webクリエイター|YouTuber|Blogger

学生時代は、タイピングのテストでクラス最下位レベルのパソコン音痴。
もっと自分の市場価値を高めたいと思い、、、
▷バンコク不動産▷インドIT留学▷ベトナムIT企業エンジニアを経て
Web系のフリーランスとして独立。

その後もっと大きい市場でインパクトのあることをしたいと思い、
ITメガベンチャーに就職。

#GoProAwards受賞 #14ヵ国渡航 #Z大学創業者 #ネコ好き

YouTube

I make videos of computer hack information and useful applications that
enrich people's work and life.


PC Hack

Web Create

Life Style

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

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです! 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

  • SassをCSSにコンパイル(変換する)簡単な方法を知りたい。
  • Rubyとか他のツールを使うのが面倒。。。
  • 何か他に簡単なコンパイルの方法はないかな?分かりやすく解説してほしい!

今回の記事では、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のコンパイル環境を構築してみてはいかがでしょうか!

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

Leave A Reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)