@charset "utf-8";
@import "fws";                                              //引入fws sass库


@include font-face('hello');                                //自定义字体
$spriteBg:map-url($_spriteHello);                           //得到精灵图片地址
$spriteWidth:map-width($_spriteHello);                      //得到精灵图片总宽
//$spriteheight:map-height($_spriteHello);                  //得到精灵图片总宽
$spriteList:sprite-list($_spriteHello);                     //得到精灵名称（e1, h1, l1, l2, o1）

.hello {
    $width:250px;
    $height:50px;
    width:$width; height:$height; position:absolute; left:50%; top:40%; margin-top:-($height / 2); margin-left:-($width / 2);
}

.sprite {background-image:url($spriteBg); background-size:($spriteWidth / 2) + px auto; display:block; opacity:0.8; float:left; transition:opacity 0.2s linear;
    &:hover {opacity:1;}
    @each $i in $spriteList {
        $w:sprite-width($_spriteHello,$i,'px') / 2;              //精灵元素宽
        $h:sprite-height($_spriteHello,$i,'px') / 4;             //精灵元素高
        $x:sprite-x($_spriteHello,$i,'px') / 2;                  //精灵元素X坐标
        $y:sprite-y($_spriteHello,$i,'px') / 2;                  //精灵元素Y坐标

        &--#{$i} {
            width:$w; height:$h; background-position:(-$x) (-$y);
            &:hover {
                background-position:(-$x) (-($y + $h));
            }
        }
    }
}

.footer {
    width:100%; text-align:center; position:absolute; left:0; bottom:10%; font-family:hello; font-size:rem(20);
}