s001：SassをVSCodeで使用する方法
「Sass：Syntactically Awesome StyleSheet」はCSSのメタ言語（対象言語を一段高い次元から論じる言語）です。
- Syntactically ＝ 文法的に
- Awesome ＝ 素敵な
- StyleSheet = スタイルシート
CSSを効率的に記述するために考案された言語です。
SASS記法とSCSS記法
- 拡張子「.sass」を使用する「SASS記法」：元からある記法
- 拡張子「.scss」を使用する「SCSS記法」：後から追加された記法
CSSと近い記述をするSCSSが主流になっている。
VSCodeにSassを導入する
Sass用拡張機能をインストール
Live Sass Compiler
Sass利用準備
- CSSファイル保存用フォルダを作成
- CSSフォルダ内に拡張子「.scss」のSassファイル作成
Sassのコンパイラを起動
SassではSCSS記法で記述した「Sassファイル」から「CSSファイル」を生成します。SassファイルからCSSファイルを生成することを「コンパイル」と呼びます。
このコンパイルをSassファイル保存時に実行させる為、VSCode右下の「Watch Sass」をクリックしてコンパイラを起動します。
「Watch Sass」から「Watching…」に表示が変わればコンパイラが起動しています。
コンパイラが起動すると「CSSファイル」と「ソースマップファイル」が生成されます。
ソースマップファイル：ファイル名.css.map
Sassファイルとコンパイルによって生成されたCSSファイルの行番号をマッピング管理しているファイルです。このマップファイルによってChrome検証ツールなどでSassファイルの記述位置が表示されます。
※ただし複雑な構成だとマッピングがずれて正しく表示されないことあり
SassファイルからCSSファイルを生成
Sassのコンパイラが起動していれば「Sassファイル」保存時、自動的にCSSファイルを生成します。
Sassの設定変更
左メニューから「拡張機能」を選択
「Live Sass Compiler」の右下にある歯車をクリック
どこを対象に設定変更するか「ユーザ」「ワークスペース」から選択します。
対象を選択した後、「settings.json で編集」をクリック
今回は「ワークスペース」を選択した場合
JSON形式で記述されたワークスペース用の設定を変更。
※Sassだけの設定ではなくワークスペース全体の設定ファイルにSass用設定を追記します
よく使う設定
{
// VSCodeワークスペースルートフォルダ
"folders": [
{
"path": "."
}
],
// VSCodeワークスペース用各種設定
"settings": {
// Sass用設定を追記
// Sassのコンパイルによる出力設定
"liveSassCompile.settings.formats": [
{
"format": "expanded", // 「nested」「compact」「compressed」から選択
"extensionName": ".css", // 拡張子「.css」として出力
"savePath": null // 別フォルダに出力する場合は文字列で指定
}
],
}
}
liveSassCompile.settings.formats
コンパイルで生成するCSSファイルの「フォーマット」・「拡張子」・「保存場所」を設定します。
format
出力するCSSファイルのフォーマットを以下から指定します。
「expanded（初期値）」「compact」「compressed」「nested」
書き出しSCSS
ul {
list-style: circle;
li {
color: green;
&:first-child {
font-weight: 700;
}
}
}
「expanded（初期値）」
"format": "expanded",
書き出されるCSS
ul {
list-style: circle;
}
ul li {
color: green;
}
ul li:first-child {
font-weight: 700;
}
「compact」
"format": "compact",
書き出されるCSS
ul { list-style: circle; }
ul li { color: green; }
ul li:first-child { font-weight: 700; }
「compressed」
"format": "compressed",
書き出されるCSS
ul{list-style:circle}ul li{color:green}ul li:first-child{font-weight:700}
「nested」
"format": "nested",
書き出されるCSS
ul {
list-style: circle; }
ul li {
color: green; }
ul li:first-child {
font-weight: 700; }
extensionName
出力するCSSファイルの拡張子を指定します。
"extensionName": ".css",
formatで「compressed」を指定した際に、圧縮ファイルであることを明示した「.min.css」を指定することが多いです。
"extensionName": "min.css",
savePath
保存場所のパスを指定します。初期値は「null」でSassファイルと同じフォルダにCSSファイルを出力します。
先頭「/」でパスを記述するとワークスペースをrootとして出力先を指定できます。
"savePath": "/css",
先頭「~」でパスを記述するとSassファイルを起点に出力先を指定できます。
"savePath": "~/../css",
