add WASD controls (closes #10)
[2048.git] / style / helpers.scss
Gabriele Cirulli 1 // Exponent
2 // From: https://github.com/Team-Sass/Sassy-math/blob/master/sass/math.scss#L36
3
4 @function exponent($base, $exponent) {
5 // reset value
6 $value: $base;
7 // positive intergers get multiplied
8 @if $exponent > 1 {
9 @for $i from 2 through $exponent {
10 $value: $value * $base; } }
11 // negitive intergers get divided. A number divided by itself is 1
12 @if $exponent < 1 {
13 @for $i from 0 through -$exponent {
14 $value: $value / $base; } }
15 // return the last value written
16 @return $value;
17 }
18
19 @function pow($base, $exponent) {
20 @return exponent($base, $exponent);
21 }
Gabriele Cirulli 22
23 // Transition mixins
24 @mixin transition($args...) {
25 -webkit-transition: $args;
26 -moz-transition: $args;
27 }
28
29 @mixin transition-property($args...) {
30 -webkit-transition-property: $args;
31 -moz-transition-property: $args;
32 }
Gabriele Cirulli 33
34 // Keyframe animations
35 @mixin keyframes($animation-name) {
36 @-webkit-keyframes $animation-name {
37 @content;
38 }
39 @-moz-keyframes $animation-name {
40 @content;
41 }
42 @keyframes $animation-name {
43 @content;
44 }
45 }
46
47 @mixin animation($str) {
48 -webkit-animation: #{$str};
49 -moz-animation: #{$str};
50 }
51
52 @mixin animation-fill-mode($str) {
53 -webkit-animation-fill-mode: #{$str};
54 -moz-animation-fill-mode: #{$str};
55 }
Gabriele Cirulli 56
57 // Media queries
58 @mixin smaller($width) {
59 @media screen and (max-width: $width) {
60 @content;
61 }
62 }
63
comments