Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

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

2018年:Cocotiie(ココッティー)として運営開始。
このサイトは快適なテーマ「SWELL」を使用していますSWELLについて

Visual Studio Code (VSC)とSASSの環境とコンパイル

VSC

SASSを使うなら、エディターは Visual Stidio Code (VSC)が超簡単!無料ですし、初心者でも怖がらずにインストールできるのでお勧めです!Atomよりも軽い様にも思いますので、メモリが厳しいPCをお使いの方にも最適です。SASSからCSSへの出力(コンパイル)の方法もシェアします。

SASSは、コンパイルしないと使えません。

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のコンパイル 1(DartJS Sass Compiler and Sass Watcher)

DartJS Sass Compiler and Sass Watcher は、SASSのコンパイルと同時にMinify(圧縮)も同時に行ってくれるので便利です。次にご紹介するLive Sass Compilerよりもオススメです。

拡張機能ボタンを押し、「DartJS Sass Compiler and Sass Watcher」を検索し、インストールと有効化するだけ。

コンパイル

SCSSファイルを保存すると、自動的にCSSファイルとminify(圧縮)したmin.cssが出力されます。

SASSのコンパイル 2(Live Sass Compiler)

minify(圧縮)しなくても良いのであればこちらでもOKですが、先のDartJS Sass Compiler and Sass Watcherの方がオススメです。

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

Live Sass Compiler

コンパイルする

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

windowの下にある[Watch Sass]をクリックすれば、保存の度に自動でコンパイルされます。

Live Sass Compiler

おまけの機能 ブラウザーで確認する

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

watch

[Go live]をクリックすると、ブラウザーが起動します。これば、htmlしか使えません。Visual Studio Code でBrowser Syncが便利です。

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX