【Sass授業二日目】Sass

Sass案件はCSSファイル直書きは厳禁

※Sassのファイル保存したタイミングで直書きしたコードは消される

sass_startup.code-workspace

// Sass用設定を追記

// Sassのコンパイルによる出力設定

"liveSassCompile.settings.formats": [

  {

    "format": "expanded", // 「nested」「compact」「compressed」から選択

    "extensionName": ".css", // 拡張子「.css」として出力

    "savePath": null // 別フォルダに出力する場合は文字列で指定

  },

  {

   "format": "compressed", // 「nested」「compact」「compressed」から選択

   "extensionName": ".min.css", // 拡張子「.css」として出力

   "savePath": null // 別フォルダに出力する場合は文字列で指定

  },

],

上は記述するように書き出し

下は圧縮したファイルとして運用時用に書き出す

ような方法もできる

style.css.map

・mapファイルのおかげで、検証ツールの内容がうまく読み込める

※コードの行番号などが検証ツールで確認できる

tmp.css

・緊急用のCSS

※出先でコンパイルできない状態でコードいじるときはこちらに書き込む

index.scss

「page/index.scss」は名前の前に「_」をいれない

デザイン変えたいページなので、ほかに適用させないため