7
7
Common values would be 12, 16 or 24
8
8
========================================================================== */
9
9
10
- $width : 100% ;
11
- $def_grid : 12 ;
12
- $margin : 0 ;
13
-
14
- @mixin container (){
15
- margin :0 auto ;
16
- width :$width ;
17
- }
18
-
19
- /*
20
- Works out the width of elements based on total number of columns and width
21
- number of columns being displayed. Removes 20px for margins.
22
- ========================================================================== */
23
-
24
- @mixin grid ($grid :$def_grid ,$cols :' ' ,$float :left ,$display :inline ){
25
- display :$display ;
26
- float :$float ;
27
- width :(100% / $grid * $cols ) - ($margin * 2 );
28
- }
29
-
30
- /*
31
- Add x amount of column padding before an element
32
- Example: @include prefix(1,12);
33
- ========================================================================== */
34
-
35
- @mixin prefix ($grid :$def_grid ,$cols :' ' ){
36
- margin-left :(100% / $grid * $cols );
37
- }
38
-
39
- /*
40
- Add x amount of column padding after an element
41
- Example: @include suffix(2,12);
42
- ========================================================================== */
43
-
44
- @mixin suffix ($grid :$def_grid ,$cols :' ' ){
45
- margin-right :(100% / $grid * $cols );
46
- }
47
-
48
- /*
49
- Remove left margin
50
- Example: @include first;
51
- ========================================================================== */
52
-
53
- @mixin first (){
54
- margin-left :0 ;
55
- }
56
-
57
- /*
58
- Remove right margin
59
- Example: @include last;
60
- ========================================================================== */
61
-
62
- @mixin last (){
63
- margin-right :0 ;
64
- }
65
-
66
- /*
67
- Push an element x amount of column(s) to the right
68
- Example: @include push(2,12);
69
- ========================================================================== */
70
-
71
- @mixin push ($grid :$def_grid ,$move :' ' ) {
72
- position :relative ;
73
- left :(100% / $grid * $move );
74
- }
75
-
76
- /*
77
- Pull an element x amount of column(s) to the left
78
- Example: @include pull(1,12);
79
- ========================================================================== */
80
-
81
- @mixin pull ($grid :$def_grid ,$move :' ' ){
82
- position :relative ;
83
- left :(100% / $grid * $move ) * -1 ;
84
- }
10
+ $width : 100% ;
11
+ $def_grid : 12 ;
12
+ $margin : 0 ;
13
+
14
+ @mixin container (){
15
+ margin :0 auto ;
16
+ width :$width ;
17
+ }
18
+
19
+ /*
20
+ Works out the width of elements based on total number of columns and width
21
+ number of columns being displayed. Removes 20px for margins.
22
+ ========================================================================== */
23
+
24
+ @mixin grid ($grid :$def_grid ,$cols :' ' ,$float :left ,$display :inline ){
25
+ display :$display ;
26
+ float :$float ;
27
+ width :(100% / $grid * $cols ) - ($margin * 2 );
28
+ }
29
+
30
+ /*
31
+ Add x amount of column padding before an element
32
+ Example: @include prefix(1,12);
33
+ ========================================================================== */
34
+
35
+ @mixin prefix ($grid :$def_grid ,$cols :' ' ){
36
+ margin-left :(100% / $grid * $cols );
37
+ }
38
+
39
+ /*
40
+ Add x amount of column padding after an element
41
+ Example: @include suffix(2,12);
42
+ ========================================================================== */
43
+
44
+ @mixin suffix ($grid :$def_grid ,$cols :' ' ){
45
+ margin-right :(100% / $grid * $cols );
46
+ }
47
+
48
+ /*
49
+ Remove left margin
50
+ Example: @include first;
51
+ ========================================================================== */
52
+
53
+ @mixin first (){
54
+ margin-left :0 ;
55
+ }
56
+
57
+ /*
58
+ Remove right margin
59
+ Example: @include last;
60
+ ========================================================================== */
61
+
62
+ @mixin last (){
63
+ margin-right :0 ;
64
+ }
65
+
66
+ /*
67
+ Push an element x amount of column(s) to the right
68
+ Example: @include push(2,12);
69
+ ========================================================================== */
70
+
71
+ @mixin push ($grid :$def_grid ,$move :' ' ) {
72
+ position :relative ;
73
+ left :(100% / $grid * $move );
74
+ }
75
+
76
+ /*
77
+ Pull an element x amount of column(s) to the left
78
+ Example: @include pull(1,12);
79
+ ========================================================================== */
80
+
81
+ @mixin pull ($grid :$def_grid ,$move :' ' ){
82
+ position :relative ;
83
+ left :(100% / $grid * $move ) * -1 ;
84
+ }
85
+
0 commit comments