Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

簡単!SASSの環境。 Visual Studio Code

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

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

INDEX

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

長年更新されておらず、使えません。代わりに他の方法を Visual Studio Code 初心者も!楽々!ブラウザの自動更新 でご紹介しています。

よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる