Jump to the content

z-indexをSassで管理する

CSS, Sass

    今日はCSSのz-indexプロパティの上手な管理方法について書きます。 そもそもz-indexって管理が煩雑になりがちなんですよね。 オーバーレイする要素はだいたい10くらいかな?その上に重なるのは20にして…。モーダルは9999にしておくか、とか個人的には結構適当な感じで指定してしまっています。 そんな困った僕に素敵なソリューションがありました。

    Sassy Z-Index Management For Complex Layouts

    ミソはSassの配列とindex関数を使うこと。

    $elements: project-covers, sorting-bar, modals, navigation;
    
    .project-cover {
        z-index: index($elements, project-covers);
    }
    

    変数($elements)にカンマ区切りで単語を入れます。scssではこれが配列になります。半角スペース区切りでも配列になります。 その配列をsassのindex関数を使って呼び出します。第一引数は配列を指定し、第二引数は該当の単語を指定します。

    .project-cover {
        z-index: 1;
    }
    

    配列のインデックス値が取得できるわけですね。 コードが綺麗で保守性も上がるのでオススメです!

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×