scss 指南针视网膜sprites.scss

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 指南针视网膜sprites.scss相关的知识,希望对你有一定的参考价值。

@import "compass/css3/background-size";

$sprites: sprite-map("social/*.png");
$sprites-retina: sprite-map("retina/*.png");

@mixin sprite-background($name) {
  background-image: sprite-url($sprites);
  background-position: sprite-position($sprites, $name);
  background-repeat: no-repeat;
  display: block;
  height: image-height(sprite-file($sprites, $name));
  width: image-width(sprite-file($sprites, $name));
  @media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 2) {
    // Workaround for https://gist.github.com/2140082
    @if (sprite-position($sprites, $name) != sprite-position($sprites-retina, $name)) {
      $ypos: round(nth(sprite-position($sprites-retina, $name), 2) / 2);
      background-position: 0 $ypos;
    }
    // Hard coded width of the normal sprite image. There must be a smarter way to do this.
    @include background-size(image-width(sprite-path($sprites)) image-height(sprite-path($sprites)));
    background-image: sprite-url($sprites-retina);
  }
}

// Usage.
.facebook-icon {
  @include sprite-background(facebook);
}

以上是关于scss 指南针视网膜sprites.scss的主要内容,如果未能解决你的问题,请参考以下文章

scss 混入 - 视网膜直列image.scss

scss 视网膜背景Mixin

scss sass:视网膜背景图像

scss Sass mixin可轻松将视网膜图像添加到CSS属性中

scss スプライト生成,座标取得,视网膜対応のSass.Compass关数のメモ

scss 指南针 - 过渡短hand.scss