Skip to content

Commit 048d77c

Browse files
raphaelfabeniraphaelfabeni
committed
Add new mixins
1 parent d63d1f6 commit 048d77c

File tree

2 files changed

+216
-55
lines changed

2 files changed

+216
-55
lines changed

‎README.md‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,22 @@ SASS Mixins
33

44
A collection of [SASS](http://sass-lang.com/ "SASS") mixins for your project.
55

6+
* Animation
7+
* Keyframes
8+
* Background size
69
* Box shadow
710
* Opacity
811
* Clearfix
912
* Border radius
1013
* Box-sizing
1114
* Transition
12-
* Animation
15+
* Columns
16+
* Transform
17+
* Default
18+
* Translate
19+
* Skew
20+
* Scale
21+
* Rotate
22+
* Gradients
23+
* Horizontal
24+
* Vertical

‎_mixins.scss‎

Lines changed: 203 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,210 @@
1-
// Box-shadow
2-
@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
3-
-webkit-box-shadow:$top $left $blur $color #{$inset};
4-
-moz-box-shadow:$top $left $blur $color #{$inset};
5-
box-shadow:$top $left $blur $color #{$inset};
1+
// Background-size
2+
@mixin background-size($value) {
3+
-webkit-background-size: $value;
4+
-moz-background-size: $value;
5+
-o-background-size: $value;
6+
background-size: $value;
67
}
78

8-
// Opacity
9-
@mixin opacity($value) {
10-
$ie: $value * 100;
11-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ie)";
12-
filter: alpha(opacity=$ie);
13-
-khtml-opacity: $value;
14-
-moz-opacity: $value;
15-
opacity: $value;
16-
}
9+
/* Box shadow
10+
========================================================================== */
11+
@mixin box-shadow($parameters...) {
12+
-webkit-box-shadow: $parameters;
13+
-moz-box-shadow: $parameters;
14+
box-shadow: $parameters;
15+
}
1716

18-
// Clearfix
19-
@mixin cf {
20-
*zoom: 1;
21-
&:before, &:after {
22-
content: "";
23-
display: table;
24-
}
25-
&:after {
26-
clear: both;
27-
}
28-
}
17+
/* Box shadow
18+
========================================================================== */
19+
@mixin opacity($value) {
20+
$ie: $value * 100;
21+
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ie)";
22+
filter: alpha(opacity=$ie);
23+
-khtml-opacity: $value;
24+
-moz-opacity: $value;
25+
opacity: $value;
26+
}
2927

30-
// Border-radius
31-
@mixin border-radius($foo) {
32-
-webkit-border-radius: $foo;
33-
-moz-border-radius: $foo;
34-
border-radius: $foo;
35-
}
28+
/* Clearfix
29+
========================================================================== */
30+
@mixin cf {
31+
*zoom: 1;
32+
&:before, &:after {
33+
content: "";
34+
display: table;
35+
}
36+
&:after {
37+
clear: both;
38+
}
39+
}
3640

37-
// Box-sizing
38-
@mixin box-sizing() {
39-
-webkit-box-sizing: border-box;
40-
-moz-box-sizing: border-box;
41-
-ms-box-sizing: border-box;
42-
box-sizing: border-box;
43-
}
41+
/* Border radius
42+
========================================================================== */
43+
@mixin border-radius($foo) {
44+
-webkit-border-radius: $foo;
45+
-moz-border-radius: $foo;
46+
border-radius: $foo;
47+
}
4448

45-
// Transition
46-
@mixin transition($parameters...) {
47-
-webkit-transition: $parameters;
48-
-moz-transition: $parameters;
49-
-o-transition: $parameters;
50-
-ms-transition: $parameters;
51-
transition: $parameters;
52-
}
49+
/* Box-sizing
50+
========================================================================== */
51+
@mixin box-sizing() {
52+
-webkit-box-sizing: border-box;
53+
-moz-box-sizing: border-box;
54+
-ms-box-sizing: border-box;
55+
box-sizing: border-box;
56+
}
57+
58+
/* Transition
59+
========================================================================== */
60+
@mixin transition($parameters...) {
61+
-webkit-transition: $parameters;
62+
-moz-transition: $parameters;
63+
-o-transition: $parameters;
64+
-ms-transition: $parameters;
65+
transition: $parameters;
66+
}
67+
68+
/* Animation
69+
========================================================================== */
70+
@mixin animation($parameters...) {
71+
-webkit-animation: $parameters;
72+
-moz-animation: $parameters;
73+
-ms-animation: $parameters;
74+
-o-animation: $parameters;
75+
animation: $parameters;
76+
}
77+
78+
/* Keyframes
79+
========================================================================== */
80+
@mixin keyframes($name) {
81+
@-webkit-keyframes $name {
82+
@content;
83+
}
84+
85+
@-moz-keyframes $name {
86+
@content;
87+
}
88+
89+
@-ms-keyframes $name {
90+
@content;
91+
}
92+
93+
@-o-keyframes $name {
94+
@content;
95+
}
96+
97+
@keyframes $name {
98+
@content;
99+
}
100+
}
101+
102+
/* Columns
103+
========================================================================== */
104+
@mixin column($count, $gap, $line:'') {
105+
-webkit-column-count: $count;
106+
-moz-column-count: $count;
107+
column-count: $count;
108+
109+
-webkit-column-gap: $gap;
110+
-moz-column-gap: $gap;
111+
column-gap: $gap;
112+
113+
@if $line != '' {
114+
-webkit-column-rule: $line;
115+
-moz-column-rule: $line;
116+
column-rule: $line;
117+
}
118+
}
119+
120+
/* Transform
121+
========================================================================== */
122+
123+
/* Default
124+
========================================================================== */
125+
@mixin transform($parameters) {
126+
-webkit-transform: $parameters;
127+
-moz-transform: $parameters;
128+
-o-transform: $parameters;
129+
-ms-transform: $parameters;
130+
transform: $parameters;
131+
}
132+
133+
/* Translate
134+
========================================================================== */
135+
@mixin translate($valueX, $valueY: 0) {
136+
-webkit-transform: translate($valueX, $valueY);
137+
-moz-transform: translate($valueX, $valueY);
138+
-o-transform: translate($valueX, $valueY);
139+
-ms-transform: translate($valueX, $valueY);
140+
transform: translate($valueX, $valueY);
141+
}
142+
143+
/* Skew
144+
========================================================================== */
145+
@mixin skew($valueX, $valueY) {
146+
-webkit-transform: skewX($valueX) skewY($valueY);
147+
-moz-transform: skewX($valueX) skewY($valueY);
148+
-o-transform: skewX($valueX) skewY($valueY);
149+
-ms-transform: skewX($valueX) skewY($valueY);
150+
transform: skewX($valueX) skewY($valueY);
151+
}
152+
153+
/* Scale
154+
========================================================================== */
155+
@mixin scale($value) {
156+
-webkit-transform: scale($value);
157+
-moz-transform: scale($value);
158+
-o-transform: scale($value);
159+
-ms-transform: scale($value);
160+
transform: scale($value);
161+
}
162+
163+
/* Rotate
164+
========================================================================== */
165+
@mixin rotate($value) {
166+
-webkit-transform: rotate($value);
167+
-moz-transform: rotate($value);
168+
-o-transform: rotate($value);
169+
-ms-transform: rotate($value);
170+
transform: rotate($value);
171+
}
172+
173+
/* Transform origin
174+
========================================================================== */
175+
@mixin origin($valueX, $valueY) {
176+
-webkit-transform-origin: $valueX $valueY;
177+
-moz-transform-origin: $valueX $valueY;
178+
-o-transform-origin: $valueX $valueY;
179+
-ms-transform-origin: $valueX $valueY;
180+
transform-origin: $valueX $valueY;
181+
}
182+
183+
/* Gradients
184+
========================================================================== */
185+
186+
/* Vertical gradient
187+
========================================================================== */
188+
@mixin vertical-gradient($startColor, $endColor) {
189+
background-color: $startColor;
190+
background: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
191+
background: -webkit-linear-gradient(top, $startColor, $endColor);
192+
background: -moz-linear-gradient(top, $startColor, $endColor);
193+
background: -ms-linear-gradient(top, $startColor, $endColor);
194+
background: -o-linear-gradient(top, $startColor, $endColor);
195+
background: linear-gradient(to bottom, $startColor, $endColor);
196+
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{$startColor}', EndColorStr='#{$endColor}');
197+
}
53198

54-
// Animation
55-
@mixin animation($parameters...) {
56-
-webkit-animation: $parameters;
57-
-moz-animation: $parameters;
58-
-ms-animation: $parameters;
59-
-o-animation: $parameters;
60-
animation: $parameters;
61-
}
199+
/* Horizontal Gradient
200+
========================================================================== */
201+
@mixin horizontal-gradient($startColor, $endColor) {
202+
background-color: $startColor;
203+
background: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
204+
background: -webkit-linear-gradient(left, $startColor, $endColor);
205+
background: -moz-linear-gradient(left, $startColor, $endColor);
206+
background: -ms-linear-gradient(left, $startColor, $endColor);
207+
background: -o-linear-gradient(left, $startColor, $endColor);
208+
background: linear-gradient(to right, $startColor, $endColor);
209+
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#{$startColor}', EndColorStr='#{$endColor}');
210+
}

0 commit comments

Comments
 (0)