Utilisez-vous les compilateurs CSS ?

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
/* CSS3 */
@backgroundClip(@box:border-box) {
	 -o-background-clip: @box;
   -moz-background-clip: @box;
 -khtml-background-size: @box;
-webkit-background-clip: @box;
		background-clip: @box;
}
@backgroundOrigin(@box:padding-box) {
	 -o-background-origin: @box;
   -moz-background-origin: @box;
 -khtml-background-origin: @box;
-webkit-background-origin: @box;
		background-origin: @box;
}
@backgroundSize(@size:auto) {
	 -o-background-size: @size;
   -moz-background-size: @size;
 -khtml-background-size: @size;
-webkit-background-size: @size;
		background-size: @size;
}

/*	borderRadius
 *	
 *	Works on:	Chrome, FireFox 3.5+, Internet Explorer 9.0, Opera 10.5, Safari 3.0+
 *	Needs test:	Konqueror
 *
 */
@borderRadius(@tl: .5em; @tr: @tl; @br: @tl; @bl: @tr;    @p_tl; @p_tr: @p_tl; @p_br: @p_tl; @p_bl: @p_tr; ) {
	 -webkit-border-top-left-radius: @tl @p_tl;
	-webkit-border-top-right-radius: @tr @p_tr;
 -webkit-border-bottom-right-radius: @br @p_br;
  -webkit-border-bottom-left-radius: @bl @p_bl;
  
	  -khtml-border-top-left-radius: @tl @p_tl;
	 -khtml-border-top-right-radius: @tr @p_tr;
  -khtml-border-bottom-right-radius: @br @p_br;
   -khtml-border-bottom-left-radius: @bl @p_bl;
  
		 -moz-border-radius-topleft: @tl @p_tl;
		-moz-border-radius-topright: @tr @p_tr;
	 -moz-border-radius-bottomright: @br @p_br;
	  -moz-border-radius-bottomleft: @bl @p_bl;
	  
			 border-top-left-radius: @tl @p_tl;
			border-top-right-radius: @tr @p_tr;
		 border-bottom-right-radius: @br @p_br;
		  border-bottom-left-radius: @bl @p_bl;
	
}

/*	boxShadow
 *	
 *	Works on:	Chrome, FireFox 3.5+, Internet Explorer 9.0, Opera 10.5, Safari 3.0+
 *	Needs test:	Konqueror
 *
 */
 @boxShadow(@shadow) {
	   -o-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
   -khtml-box-shadow: @shadow;
  -webkit-box-shadow: @shadow;
          box-shadow: @shadow;
 }
@dropShadow(@x:0; @y:1px; @blur:2px; @spread:0; @color:#000) {
	@boxShadow(@x @y @blur @spread @color);
}
@insetShadow(@x:0; @y:1px; @blur:2px; @spread:0; @color:#000) {	
	@boxShadow(inset @x @y @blur @spread @color);
}
@rotate(@deg: -22deg) {
       -o-transform: rotate(@deg);
     -moz-transform: rotate(@deg);
   -khtml-transform: rotate(@deg);
  -webkit-transform: rotate(@deg);
}

/*	transition
 *	
 *	Works on:	Chrome, FireFox 3.7+, Opera 10.5, Safari 3.2+
 *	Needs test:	Konqueror
 *
 *	@property	none | all | [property]*
 *	@duration	[time]*
 *	@function	[ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )]*
 *	@delay	[time]*
 *
 */
@transition(@property: all; @duration: .4s; @function; @delay: 0;) {
	     -webkit-transition-property: @property;
  		 -webkit-transition-duration: @duration;
  -webkit-transition-timing-function: @function;
		  	-webkit-transition-delay: @delay;
		  	
	      -khtml-transition-property: @property;
  		  -khtml-transition-duration: @duration;
   -khtml-transition-timing-function: @function;
		  	 -khtml-transition-delay: @delay;
		  	 
			-moz-transition-property: @property;
			-moz-transition-duration: @duration;
	 -moz-transition-timing-function: @function;
			   -moz-transition-delay: @delay;
		  	 
			  -o-transition-property: @property;
			  -o-transition-duration: @duration;
	   -o-transition-timing-function: @function;
				 -o-transition-delay: @delay;
		  	
				 transition-property: @property;
				 transition-duration: @duration;
		  transition-timing-function: @function;
					transition-delay: @delay;
}
@verticalGradient(@top: #FFF; @bottom: #000) {
			  @gap: ((@bottom - @top) + (@top - @bottom));
			 @base: @bottom - (@bottom - @top);
			 
  background-color: @gap / 2 + @base;
  background-image: -moz-linear-gradient(top, @top, @bottom);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, @top),color-stop(1, @bottom));
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr=@top, EndColorStr=@bottom);
        -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr=@top, EndColorStr=@bottom);
}
@horizontalGradient(@left: #FFF; @right: #000) {
			  @gap: ((@right - @left) + (@left - @right));
			 @base: @right - (@right - @left);
			 
  background-color: @gap / 2 + @base;
  background-image: -moz-linear-gradient(left, @left, @right);
  background-image: -webkit-gradient(linear,left top,right top,color-stop(0, @left),color-stop(1, @right));
            filter:  progid:DXImageTransform.Microsoft.gradient(StartColorStr=@left, EndColorStr=@right, GradientType=1);
        -ms-filter:  progid:DXImageTransform.Microsoft.gradient(StartColorStr=@left, EndColorStr=@right, GradientType=1);
}