Visual Studio Code、Sassコンパイルのフォーマット

 

Visual Studio Code(以下:VSCode)でSassをコンパイル(プログラミング言語で書かれたコンピュータプログラム(ソースコード)を解析し、コンピュータが直接実行可能な形式のプログラムに変換すること。IT用語辞典より)した後のCSSのフォーマットやファイルが作られる位置などについてです。

フォーマット?

 

よく見る見易いこの形のCSSにするには expanded と指定(デフォルトはこれに設定されています)、

 

読み込み用にファイルを軽くしたいなら compressed 。他にもありますがフォーマットについては今回この2つを解説。

 

CSSのフォーマット : expanded、compressedのサイズ比較

「Sassのテスト〜」と1行書いて上記の2種類(expanded、compressed)でコンパイルしたCSSのファイルのサイズを比べてみました。

expanded:style.css → 61バイト
compressed:stylemin.css → 57バイト

 

 

それではVSCodeでファイルを作る所からやっていきます◎

Visual Studio Codeでファイルを開く

VSCodeを立ち上げます。ファイル>開くで、

 

デスクトップに作った中身が空のフォルダ「test」を開きます。

 

VSCodeの上に「ようこそーtest」と選んだフォルダ名が出ればOKです。左の四角「拡張機能」をクリックします。

 

Live Sass Compilerの拡張機能で好みの設定に変更する

Live Sass Compiler(入っていない方は入れておいてください)の歯車マーク>拡張機能の設定

 

settings.json で編集」下の方にいくつもありますがどれでも一緒なので1つ選んでクリック、

 

こんな感じで書き換えます。AとBの2パターン作りました。

比較のため2パターン作りますがもちろん1つでも大丈夫です

 

書き換えが済んだら上の×マークで閉じます。
この後解説に必要なファイルを作ってからABそれぞれの内容をご説明します。

 

Visual Studio Code 新しいファイルを作成

左上書類マーク(エクスプローラー)をクリック>書類に+マークの「新しいファイル」をクリックすると青枠の四角が出るので、

 

ここに index.html と打ち込みます。

書いている途中はマークが色々変わりますが index.html と書き終わるとお馴染みの<>マークになります

 

出来たindex.htmlファイルに必要最低限のコードを書き、<p>タグで「Sassのテスト〜」などと書き保存します。

 

htmlファイルに続いてSassファイルを作ります。書類に+マークの「新しいファイル」をクリック>青枠の中にファイル名 style.scss と書きます。こちらも書き終わるとSassマークが付きます◎

 

先程htmlファイルに書いた<p>タグに、今作ったstyle.scssで「color水色」のスタイルを当て保存します。

保存しただけでは左の「開いているエディター」に変化はありません

 

下、水色部分の Watch Sass をクリックしコンパイルされると、、

 

ファイルが増えた

CSSフォルダが出来てその中にA2つ、B2つ、計4つのファイルが作られました。ここからは何故CSSフォルダが出来て、中のファイルの拡張子は.css 、min.cssなのかの説明です。

その前にA、Bそれぞれの「〇〇.css.map」はソースマップと言うファイルで、

 

Chromeなどの検証(デバッグモード)で見る時にあると便利なのでデフォルトで作られるようになっています。

 

設定項目:savePath, extensionName

Live Sass Compiler>歯車マーク>拡張機能の設定>「settings.json で編集」した時にこのように書き換えました。

cssフォルダをどこに作るか決める

コンパイル後にstyle.scssと同じ階層にcssフォルダが作られたのは savePath で"/css/"と設定したからです。

A「.css」の拡張子が付いたファイルが作られたのは extentionName でコンパイル後の拡張子を".css"にすると設定したからです。(デフォルトです)
B「.min.css」の拡張子が付いたファイルが作られたのも同じく".min.css"にすると設定したからで、これは通常 format に"compressed"(圧縮、軽量タイプ) を設定している場合に使います。

minとは最小の意味で min.css と言う拡張子のファイルを見ると「読み込み用の軽量化されたファイルなんだな」と分かります。

余談ですが「Compress JPEG」と言う画像を圧縮できるサイトで生成されたファイルの拡張子も「〇〇-min.jpg」となっていました。(ここから下の画像はこのサイトを使って20%ほど圧縮した物を使っています)

 

設定項目:format

format、これは先にも書いた通り他にもあります(compact、nested)が今回はこの2つの解説です。cssに出力された時のフォーマット、見た目を指定できます。

expandedはデフォルトでよく見るcssの読みやすい形。
compressed空間、改行を削除しデータを軽くします。cssは見にくいですがデータが軽いので読み込み用に使用したりします。

コードが少しだけだとよく分かりませんが長くなるとかなり違います。

 

expanded 見やすい。

 

compressed ギュッとしています。

 

 

デスクトップに作ったフォルダの方はこんな感じです。○印がコンパイルによって増えた(作られた)部分です。

 

コンパイルして出来たcssファイルをリンクする

htmlファイルへのリンクがまだでしたので表示「Sassのテスト〜」は黒のままでした。

 

colorを水色にした、コンパイルで作られたcssファイルをリンクさせます。cssフォルダの中の style.css でも stylemin.css でもどちらでも大丈夫です◎

 

 

savePath がデフォルトの null の場合

setting.json で savePath をnull(デフォルト)にするとコンパイルした後のファイルはどこに作られるのかやってみます。(他の設定は同じです)

 

答えはstyle.scssと同じ階層に作られました(○印の4つ)。この場合cssフォルダは作られないので、

 

index.html ファイルのリンクも先程のhref="css/style.css"css/が不要になります◎

href="style.css"でもhref="stylemin.css"どちらでも良いんだったよね