sassでz-indexをまとめて管理しておく＆配列順に番号をつけてくれる関数

Data

2015/04/26

Tag

Sass

z-indexを使っていると、この要素ってどのぐらいの値なんだっけ・・。と迷うことがあったり
とりあえず99999とか大きい数字つけとくかなーみたいな考えになったりしちゃう時がありますね＾＾；

そんなことにならないように1つのところでz-indexを管理して、見やすくなるような関数を作ってみました。

sass

$z-index: (
    test2
    test1
    test3
);

@function z-index($name, $list: $z-index) {
    @return abs(index($list, $name) - length($list) - 1);
}


@each $name in $z-index {
    #{'.' + $name} {
        z-index: z-index($name);
    }
};

出力css

.test1 {
    z-index: 2; 
}
.test2 {
    z-index: 3; 
}
.test3 {
    z-index: 1; 
}

$z-indexに追加したり配列の順番をかえたりすると、
配列通りに上から並んでくれるので、分かりやすいかなぁと思います。