-
Notifications
You must be signed in to change notification settings - Fork 3
/
sprite.less
82 lines (77 loc) · 2.35 KB
/
sprite.less
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
78
79
80
81
82
.sprite(
@image,
@width,
@height : @width,
@backgroudSize : auto,
@path : '',
@setBoxsizing : true
)
when (@use-root-path = false)
{
.backgroundImage(@image, @path);
}.sprite(
@image,
@width,
@height : @width,
@backgroudSize : auto,
@path : @path-img,
@setBoxsizing : true
)
when (@use-root-path = true)
{
.backgroundImage(@image, @path);
}.sprite(
@image,
@width,
@height : @width,
@backgroudSize : auto,
@path : @path-img,
@setBoxsizing : true
){
background-repeat : no-repeat;
background-size : @backgroudSize;
.size(@width, @height, 1, @setBoxsizing);
}
.spritePosition(@horizontalPosition:0, @verticalPosition:0, @width:0, @height:@width)
when (@horizontalPosition = 0)
and not (@verticalPosition = 0) {
background-position: 0 unit(-(@verticalPosition*@height),px);
}.spritePosition(@horizontalPosition:0, @verticalPosition:0, @width:0, @height:@width)
when (@verticalPosition = 0)
and not (@horizontalPosition = 0) {
background-position: unit(-(@horizontalPosition*@width),px) 0;
}.spritePosition(@horizontalPosition:0, @verticalPosition:0, @width:0, @height:@width)
when (@horizontalPosition = 0)
and (@verticalPosition = 0) {
background-position: 0 0;
}.spritePosition(@horizontalPosition:0, @verticalPosition:0, @width:0, @height:@width)
when not (@horizontalPosition = 0)
and not (@verticalPosition = 0) {
background-position: unit(-(@horizontalPosition*@width),px) unit(-(@verticalPosition*@height),px);
}
.spriteCoordinates(@positionX:0, @positionY:0) {
background-position : -@positionX -@positionY;
}
.scaleBackgroundSize(
@scale ,
@width ,
@height : 0
) {
background-size : (@width*@scale) (@height*@scale);
}
.setSprite(
@selector ,
@horizontalPosition : 0,
@verticalPosition : 0,
@width ,
@height : @width,
@scale : 1
) {
&.@{selector} {
.spritePosition(@horizontalPosition, @verticalPosition, @width*@scale, @height*@scale);
}
}
.scaleSprite(@scale, @spriteWidth, @spriteHeight, @backgroundWidth, @backgroundHeight) {
.size(@spriteWidth, @spriteHeight, @scale);
.scaleBackgroundSize(@scale, @backgroundWidth, @backgroundHeight);
}