デイトラWeb制作コース中級編DAY12 準備編・ヘッダーとメインビジュアルのコーディング③

最低限定義する値

早速_variables.scssの中身を書いていきます。コードを書くとそのまま回答例のコピペになってしまうのでアウトラインだけ書きますね。

検索してて、なんか既視感のある記事だなと思ったらはにわまんさんの記事でした。笑(デイトラあるある)

ここから項目のみリストアップし、回答例の順番に直すとこうなります。

• メインカラーとアクティブカラー
• インナー幅
• 重なり順（z-index）
• 英字フォント
• (ブレークポイント)

実際の回答例の設定項目はこうなってます。

• 色
• レイアウト幅
• 階層
• 余白
• ヘッダー高さ
• フォント
• (ブレークポイント)
• (メディアクエリー)

重なり順をレイヤーで管理するなんて、回答例を見なければ思いつきませんでした！余白やヘッダーの高さについても。目から鱗です。

22.04.27追記：Map型について

Map型(連想配列)
Map型は任意の名前と値を複数設定することが可能で、名前をキーにして値を取り出すことができます。定義する場合は全体を()(丸括弧)で囲い、キーと値のペアを,(カンマ)区切りで指定します。

Map型の中で、それぞれ色や文字列などのデータタイプを持ち、Map型もネストして書くことができます。また、Map型には、専用の関数もあります。

『Web制作者のためのSassの教科書 Webデザインの現場で必須のCSSプリプロセッサ』より引用

ブレークポイントとメディアクエリーについては、私は別のファイル(_mixin.scss)に書くことにしたので()としました。これはスニペットとして登録しておくと良いですね。

変数の命名については、接頭語をつけて分類した方が何かと分かりやすいですね！そうするとVS Codeが補完してくるのも嬉しいポイント。

例えば以下のような感じです。

// 色
$color-main: #3f51b5; // ベース色
$color-active: #e81919; // アクティブ色
$color-background-base: #fff; // 背景色
・
・
・

数値はカンプから読み取りましょう。わかったようなこと書いてますが私もこれからです。