簡単!SASSの環境。 Visual Studio Code

VSC

SASSを使うなら、AtomよりVisual Stidio Code 通称VS Codeが超簡単!初心者でも怖がらずにインストールできるのでお勧めです!Atomよりも軽い様にも思いますので、メモリが厳しいPCをお使いの方にも最適です。

以前、「初心者にも!無料のAtomエディタでSASSを使う」 をご紹介しました。正直なところ、かなり面倒ですし、難しいので PCを買い換えたタイミングで、Visual Stidio Codeに乗り換える事にしました。

VS Code(Visual Stidio Code)をインストールする

無料でダウンロードできます。ダウンロードは3タイプあり、誰でもOKなUser Installer、管理者権限が必要なSystem Installerと、zip形式になっていて、exeファイルを起動すれば使えるタイプがあります。zipは、ちょっとだけ使用した人や、インストールしたくない方向けなのでしょうか?

Visual Stidio Code

Visual Studio Code

基本的には「次へ」で突き進めばOKです。

Visual Studio Code

お好みでショートカットを作成

Visual Stidio Code

Sassを使えるようにする

sassとコンパイルについては、「初心者にも!無料のAtomエディタでSASSを使う」で少し触れていますので、ご参照下さい。

起動したら、左のメニューのExtentionをクリックし、「Live Sass Compiler」を検索し、インストールします。

Live Sass Compiler たったのコレだけ!!

コンパイルする

sassファイルにコードを書き終えたら、cssファイルに書き出し(コンバイル)します。

windowの下にある[Watch Sass]をクリックすれば自動でコンパイルされます。最初の1回だけで良いみたいです。

Live Sass Compiler

ブラウザーで確認する

Live Sass Compilerをインストールした事で、[Live Server]というextentionがインストールされます。

[Go live]をクリックすると、ブラウザーが起動します。

watch

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください