2020/11/15 （最終更新日：2023/10/13）

【初心者向け】VSCodeでのSassの使い方を徹底解説【導入手順から学習方法まで】

Web制作・ﾌﾟﾛｸﾞﾗﾐﾝｸﾞ

※本サイトはアフィリエイト広告を利用しています。

【Sassの使い方を知りたい人】

「Sassを使ってみたいけど何から始めればいいんだろ。。VSCodeでの使い方が知りたい。」

こういった疑問に答えます。

本記事の内容

【前提知識】そもそも“Sass”とは？【CSSが効率的に書ける】
【VSCode版】Sassの使い方とは【導入手順から解説】
Sassの使い方を効率的に学ぶ方法とは【おすすめ4選】

この記事を書いている僕は、
過去にWeb制作会社で
エンジニアとして働いており、
実際に現場でSassを使っていました。

そんな僕が「これからSassを使いたい」
という人に向けて、この記事を読めば
すぐにSassを使えるようになる
というレベルまで、分かりやすく解説しました。

ちなみにタイトルの通り、
エディタは『VSCode』を想定しています。
まだ使ったことが無い方は
めちゃくちゃ使いやすいので、この機会にぜひ。

【前提知識】そもそも“Sass”とは？【CSSが効率的に書ける】

まずそもそも、
Sassとは一体何者なのかですが、
結論、CSSを効率的に書ける言語でして、
『.sass』と『.scss』の2種類があります。

「その2つはどう違って、どっちを使えばいいの？」

と思われるでしょうが、
主流は『.scss』の方なので、
あまり細かいことは気にせず
基本的にそちらを使うと覚えておけば良いでしょう。

もし違いが気になるという方は、
[scss sass 違い] などでググれば
疑問を解決してくれる記事が見つかると思います。

【VSCode版】Sassの使い方とは【導入手順から解説】

ではここからは、
Sassの導入手順と簡単な使い方を解説します。

具体的な手順は、以下の通りです。

手順①：VSCodeにプラグイン「Live Sass Compiler」をインストール
手順②：scssファイルを作成
手順③：プラグインを起動
手順④：実際にコードを書く

手順①：VSCodeにプラグイン「Live Sass Compiler」をインストール

ここであなたは疑問に感じたのではないでしょうか。
「なぜこのプラグインが必要なのか」と。

実はSassというのは、
ただファイルにコードを書くだけでは
見た目の変化として表れないので、
CSSファイルに変換する”コンパイル”
というものをする必要があります。

その変換する作業を
簡単にしてくれるのが、
この「Live Sass Compiler」
というプラグインというわけです。

このコンパイルをしてくれるツールには
他にもいくつかの種類があるので、
それに関しては記事の最後でご紹介します。