SCSSを始めるための vs code の設定
まずプラグイン「Live Sass Compiler」をインストールする
細かなプラグインの設定をします
CSSを生成する時にどこに書き出すか、どんなファイルを生成するのかを設定します。
“liveSassCompile.settings.formats”: [
{
“format”: “compressed”,
// “format”: “expanded”,
“extensionName”: “.css”,
“savePath”: “~/../css”
}
],
“liveSassCompile.settings.generateMap”: true,
生成するファイルの種類について
まず、「liveSassCompile.settings.formats」はCSSファイルをどのようなファイルで生成するかを設定します。
「compressed」は全て１行で書かれている圧縮された「min.style.css」を生成し、
「expanded」は今まで書いてきたようなCSSである「style.css」を生成します。
CSSファイルをどこに生成するかについて
また、「extensionName」生成するファイルは何か、拡張子「.css」ファイルを生成する設定、
「savePath」はどこにファイルを保存するかの設定するものなので、
フォルダ名「SCSS」の中に保存している場合は１個上の階層に上がったところにいるフォルダ名「CSS」の中に保存したい場合は
「~/../css」と記述します。
.map ファイルについて
また、「map」ファイルを生成する場合は「true」を設定する。
検証画面で見るときに、「map」ファイルが生成されていると、「SCSS」ファイルのどこに記述されている内容かがわかるようになります。
圧縮ファイルで生成する場合は必要なファイルになります。
