@charset "utf-8";

/**
 * 引用自定义字体
 * @param string $name 字体名称
 *
 */

@mixin font-family($name) {
    font-family: $name;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0;
    -moz-font-smoothing: grayscale;
}

/**
 * 自定义字体
 * @param string $name 字体名称
 * @param string $path 字体路径
 *
 */
@mixin font-face($name, $path) {
    @font-face {
        font-family: $name;
        src: url("#{$path}#{$name}.eot");
        src: url("#{$path}#{$name}.eot?#iefix") format("embedded-opentype"), url("#{$path}#{$name}.woff") format("woff"), url("#{$path}#{$name}.ttf") format("truetype"), url("#{$path}#{$name}.svg#") format("svg");
        font-weight: normal;
        font-style: normal;
    }

    .#{$name} {
        @include font-family($name);
    }
}

@mixin retina-sprite($map, $sprite, $scale) {
    $width: image-width(sprite-file($map, $sprite));
    $height: image-height(sprite-file($map, $sprite));
    $offsetY: ceil(nth(sprite-position($map, $sprite), 2) / $scale);
    background: sprite-url($map) 0 $offsetY no-repeat;
    $zoomX: ceil(image_width(sprite-path($map)) / $scale);
    $zoomY: auto;
    @include background-size($zoomX $zoomY);
    display: block;
}