forked from gabrielecirulli/2048
-
Notifications
You must be signed in to change notification settings - Fork 3
/
helpers.scss
81 lines (71 loc) · 1.62 KB
/
helpers.scss
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
// Exponent
// From: https://github.com/Team-Sass/Sassy-math/blob/master/sass/math.scss#L36
@function exponent($base, $exponent) {
// reset value
$value: $base;
// positive intergers get multiplied
@if $exponent > 1 {
@for $i from 2 through $exponent {
$value: $value * $base; } }
// negitive intergers get divided. A number divided by itself is 1
@if $exponent < 1 {
@for $i from 0 through -$exponent {
$value: $value / $base; } }
// return the last value written
@return $value;
}
@function pow($base, $exponent) {
@return exponent($base, $exponent);
}
// Transition mixins
@mixin transition($args...) {
-webkit-transition: $args;
-moz-transition: $args;
transition: $args;
}
@mixin transition-property($args...) {
-webkit-transition-property: $args;
-moz-transition-property: $args;
transition-property: $args;
}
@mixin animation($args...) {
-webkit-animation: $args;
-moz-animation: $args;
animation: $args;
}
@mixin animation-fill-mode($args...) {
-webkit-animation-fill-mode: $args;
-moz-animation-fill-mode: $args;
animation-fill-mode: $args;
}
@mixin transform($args...) {
-webkit-transform: $args;
-moz-transform: $args;
transform: $args;
}
// Keyframe animations
@mixin keyframes($animation-name) {
@-webkit-keyframes $animation-name {
@content;
}
@-moz-keyframes $animation-name {
@content;
}
@keyframes $animation-name {
@content;
}
}
// Media queries
@mixin smaller($width) {
@media screen and (max-width: $width) {
@content;
}
}
// Clearfix
@mixin clearfix {
&:after {
content: "";
display: block;
clear: both;
}
}