_mixins.scss
1.39 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
@charset "utf-8";
/*
* @description: header css
* @author: chenglong.wang@yoho.cn
* @date: 2015/4/16
*/
//------------------------------------------------
/*
* @description:用于生成retina下的图片精灵
*/
@mixin retina-sprite ($map,$sprite,$horizontal: false,$vertical: false) {
$width: image-width(sprite-file($map, $sprite));
$height: image-height(sprite-file($map, $sprite));
$offsetY: ceil(nth(sprite-position($map,$sprite),2)/2);
background: sprite-url($map) 0 $offsetY no-repeat;
$zoomX: ceil(image_width(sprite-path($map))/2);
$zoomY: auto;
@include background-size($zoomX $zoomY);
display: block;
width: ceil($width/2)+1;
height: ceil($height/2)+1;
$ifabsolute: true;
@if $horizontal {
@if $ifabsolute {
position: absolute;
$ifabsolute: false;
}
@if $horizontal == true {
left: 50%;
margin-left: -(round($width/4));
}
@else{
left: $horizontal;
}
}
@if $vertical {
@if $ifabsolute {
position: absolute;
$ifabsolute: false;
}
@if $vertical == true {
top: 50%;
margin-top: -(round($height/4));
}
@else{
top: $vertical;
}
}
}
/*
* @description:用于生成retina下的背景图片
*/
@mixin retain-background ($url) {
background: image-url($url) center center no-repeat;
$width: image-width($url);
@include background-size($width/2 auto);
}