要素の重なり（z-index）をSassで管理する方法【mapで一括管理】

※本サイトはアフィリエイト広告を利用しています。

【z-indexの記述の仕方に悩んでいる人】

 

こういった疑問に答えます。

僕は過去に
Web制作会社での勤務経験があり、
現場で実際にSassを使っていました。

この記事を読んでいただければ、
z-indexを指定している要素と
その重なり順をひと目で把握でき、
劇的に効率良くコーディングが出来るようになります。

ちなみに、
Sassの基礎学習がまだの方は、
以下の記事を参考にしてください。

≫【初心者向け】VSCodeでのSassの使い方を徹底解説【導入手順から学習方法まで】

【初心者向け】VSCodeでのSassの使い方を徹底解説【導入手順から学習方法まで】

VSCodeを使ったSassの使い方が知りたいですか？この記事では、VSCodeという有名なエディタを用いたSassの使い方や導入方法を実際のスクショを載せながら分かりやすく解説しています。これからVSCodeを使ってSassでコードを書きたいという方は必見です。

 

では解説していきます。

「z-index」をSassで管理する方法

勿体ぶってもしょうがないので、
先に実際のコードをお見せします。

 

【style.scss】

// マップを用意
$z: (
 mv: 10,
 header: 20,
);

// map-get関数を使って出力
.header {
 z-index: map-get($z, header);
}
.mv {
 z-index: map-get($z, mv);
}

 
 

このコードを見て、

と思われた方は、
下記の記事を参考にしてください。

≫【Sass】mixinでメディアクエリを管理する方法【応用編】

【Sass】mixinでメディアクエリを管理する方法【応用編】

Sassのmixinを使ってメディアクエリを管理する方法が知りたいですか？この記事では、Sassでどのようにメディアクエリを記述すれば良いかを具体的なコードを載せながら解説しています。mixinを使ったメディアクエリのコードの書き方を知りたい人は是非ご覧ください。

 

そして先ほどのコードを
コンパイル（CSSに変換）すると
以下のようになります。

 

【style.css】

.header {
 z-index: 20;
}
.mv {
 z-index: 10;
}

 
 

このように
マップで管理することにより、
どの要素にz-indexを指定したかや、
それぞれの要素の重なり順が
マップを確認すれば一目瞭然なので、
快適さを実感していただけると思います。