77 Common values would be 12, 16 or 24
88 ========================================================================== */
99
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