「Visual Studio Code」IDE(Integrated Development Environment：統合開発環境)に「フロントエンド」開発環境用の「Live Sass Compiler」を導入する(Visual Studio Codeはインストール済みとする)。
「Live Sass Compiler」はSassだけで無く、ベンダー･プレフィックスも自動的に付与可能な優れモノで、Sassを使わなかったとしても、ベンダー･プレフィックスに対応したいなら必須と言って良いでしょう(付与する条件も設定可能)。
なお以前に「Live Sass Compiler」が起動しないと言うバグが有りましたが、もしそのバグが発生した場合は、SCSSファイル(hoge.scssのような適当な名前でOK)を新規作成すれば良いようです。
まず「Live Sass Compiler」を導入する、「Visual Studio Code」は下記のように設定して下さい。
設定方法(1番目の画像を参照)。
左下の歯車アイコンをクリック→[設定]で右側に[設定]パネルが表示される(又は[Ctrl]+[,]キー)。
[ユーザー]タブを選択、右上の「紙」アイコン「設定(JSON)を開く」をクリックし、「settings.json」ファイルを開く。
[Ctrl]+[F]で検索モードにし、検索ボックに「liveSassCompile.」を入力し、既存の「liveSassCompile.」設定が無いことを確認する。
「settings.json」内が空の場合は、波括弧を下記のように記述する。
一般的な解説サイトでは、この外側の波括弧を省略している場合があるので注意して下さい。
{
}
「settings.json」内に既に何らかの設定が存在している場合は、下記のように全体が波括弧で囲われているハズで、もし全体が波括弧で囲われてない場合は正常では無いと言うことになります。
また 最終行の行末に「,」(半角カンマ)が付いて無い場合が多々あるので、必ず「,」(半角カンマ)を付けるように心がけて下さい。
{
1行目,
2行目,
…
n行目(最終行),
}
既存の「liveSassCompile」設定が無いことを確認したら、何も設定が無い場合は波括弧内にコピペ、既に設定がある場合は最終行の次にコピペして下さい。
一般的にはsavePathは"/css"が推奨されてますが、savePathに なにも設定したく無い場合は"/"(スラッシュ)だけ設定しておけば良いようです。
// https://yumegori.com/vscode-sass-setting20200116
"liveSassCompile.settings.formats": [ // Sassの出力内容の設定
{
"format": "expanded", // expanded、nested、compact、compressedのどれかを選ぶ
"extensionName": ".css", // ～.cssとして出力
"savePath": "/css", // cssフォルダに出力
}
],
"liveSassCompile.settings.excludeList": [ // 対象外とするフォルダを指定
"**/node_modules/**",
".vscode/**",
".history/**",
],
"liveSassCompile.settings.autoprefix": [ // ベンダープレフィックスを付与する対象のブラウザの条件
"> 1%",
"last 2 versions",
"ie >= 11",
"Android >= 4",
"ios_saf >= 8",
// ↑この設定の場合「シェア1%以上、最新から過去までの2つ分のバージョン、IE 11以上、Android OS 4以上、iOS 8以上(Safari)」の条件でベンダープレフィックスが付与されます。
],
SCSSファイルの作成、CSSファイルで作ってはダメで、拡張子は必ず「scss」にして下さい。
「Live Sass Compiler」をONにするには下方の「Watch Sass」(2番目の画像)をクリックすると「Watching...」(3番目の画像)に変化し、「Live Sass Compiler」がアクティブになるようです。
|
|
掲示板に書き込む前に必ず この ”注意書き”を お読み下さい．
http://ashtarte.hotcom-web.com/utf8/smt.cgi?r+rpr/ を ご利用 下さい。
