scss 指南针视网膜sprites.scss
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 指南针视网膜sprites.scss相关的知识,希望对你有一定的参考价值。
@mixin my-sprite-background ($sprites, $sprites-retina, $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;
}
@include background-size(image-width(sprite-path($sprites)) auto);
background-image: sprite-url($sprites-retina);
}
}
/*** Usage
$nonretina: sprite-map("sprite/non-retina/*.png", $spacing: 60px, $layout: vertical);
$retina: sprite-map("sprite/retina/*.png", $spacing: 60px, $layout: vertical);
div.item1 {
@include my-sprite-background($nonretina, $retina, "my-image-name1");
}
***/
以上是关于scss 指南针视网膜sprites.scss的主要内容,如果未能解决你的问题,请参考以下文章
scss 混入 - 视网膜直列image.scss
scss 视网膜背景Mixin
scss sass:视网膜背景图像
scss Sass mixin可轻松将视网膜图像添加到CSS属性中
scss スプライト生成,座标取得,视网膜対応のSass.Compass关数のメモ
scss 指南针 - 过渡短hand.scss