_header-nav.scss 1.39 KB
/*
 * @description: header css
 * @author: chenglong.wang@yoho.cn
 * @date: 2015/4/16
 */

.girl-nav {
    height: 39px;
    @include hide-text();

    ul {
        height: 100%;
        background: #c3e2ce;

        li {
            float: left;
            height: 100%;
            position: relative;
            margin: 0 12px 0 10px;
        }
    }

    @each $nav-item in home, fashion, beauty, sport, lifestyle, magazine, video {
        .nav-#{$nav-item} a {
            @include retina-sprite($nav, #{$nav-item}-black);
            margin-top: 9px;
        }
    }

}

@each $channel, $color, $val in (home, #c3e2ce, 1),
    (fashion, #9b90ff, 2),
    (beauty, #ffcaca, 3),
    (sport, #84e3ca, 4),
    (lifestyle, #ffca72, 5),
    (magazine, #7ecaff, 6),
    (video, #c9caca, 7) {
    ##{$channel} {
        .girl-nav ul {
            background: $color;

            li:nth-of-type(#{$val}) {
                a {
                    @include retina-sprite($nav, #{$channel}-nav);
                }

                /*&:after {
                    display: block;
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: 3px;
                    background: #000;
                }*/
            }
        }
    }
}