SCSSまとめ集
目次
1. Live Sass Compilerを使用したコンパイル方法
公式サイト
https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md
- エディタはVisual Studio Codeを使用。
拡張機能としてLive Sass Compilerをインストールする。
SCSSファイルを作成し、コードを記述した後、下の「Watch Sass」を押す。
-
同一フォルダにcssファイルとmapファイルが作成される。
- mapファイルには、参考にしたscssファイルと出力されたcssファイルの情報が記載されてある。
- 以下、保存する度にコンパイルが自動でされる。
- 自動コンパイル時に、Successなら成功、Errorなら失敗（コード内にエラーがある）
- 自動コンパイルをやめたい場合は、「Watching...」を押す。
2. コンパイル場所を指定する
・エディタ自体にコンパイル場所を設定する場合
拡張機能より「Live Sass Compiler」を右クリック→拡張機能の設定をつける
ユーザータブを選択し、Formats→settings.jsonで編集をクリック
例として以下のコードをsettings.jsonに記載する()
"liveSassCompile.settings.formats":[
// This is Default.
{
"format": "expanded",
"extensionName": ".css",
"savePath": null
},
// You can add more
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "/dist/css"
},
// More Complex
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "~/../css/"
}
]
- format コンパイル後のcssファイルの記載方法。expanded, compact, compressed, nestedを指定する
css
/* expanded */
p {
font-size: 16px;
}
p span {
color: blue;
}
/* compact */
p { font-size: 16px; }
p span { color: blue; }
/* compressed */
p{font-size:16px}p span{color:blue}
/* nested */
p {
font-size: 16px; }
p span {
color: blue; }
- extensionName...拡張子を設定
- savePath...コンパイル先のパスを設定
4.コンパイルすると以下のような感じになる。
・プロジェクトごとにコンパイル場所を設定する場合
上記の2.の手順にて、ユーザータブではなく、ワークスペースタブを選択。
ローカルに作成されたsettings.jsonに同じように記述してコンパイルすればOK。
3. Live Sass Compilerのsettings.jsonについて
| 設定項目 | 内容 |
|---|---|
| Autoprefix | 自動でベンダープレフィックスを追加する際に対象とするブラウザの条件 |
| Exclude List | コンパイル対象から除外するファイルの指定 |
| Formats | コンパイル後のCSSファイルのフォーマットや保存先のパスなど |
| Generate Map | コンパイル時にMAPファイルを出力するか |
| Include Items | コンパイル対象に含めるファイルの指定 |
| Show Output Window | 出力パネルを自動的に表示するかどうか |
詳しい内容は後で記載。