sassでz-indexをまとめて管理しておく&配列順に番号をつけてくれる関数
- Data
- 2015/04/26
- Tag
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
に追加したり配列の順番をかえたりすると、
配列通りに上から並んでくれるので、分かりやすいかなぁと思います。