Skip to content

Commit 74a8223

Browse files
thingsymthingsym
committed
feat: add Flexbox Grid Mixins for Dart Sass
1 parent f27bfd0 commit 74a8223

File tree

1 file changed

+197
-0
lines changed

1 file changed

+197
-0
lines changed

‎dart-sass/_flexbox-grid-mixins.scss‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
// ===================================================================
2+
// Flexbox Grid Mixins (Dart Sass)
3+
// Version 0.3.0
4+
// Description: Sass Mixins to generate Flexbox grid
5+
// Author: thingsym
6+
// GitHub: https://github.com/thingsym/flexbox-grid-mixins
7+
// MIT License
8+
// ===================================================================
9+
10+
@charset 'utf-8';
11+
12+
// Built-In Modules
13+
@use "sass:math";
14+
@use "sass:meta";
15+
16+
$flexbox-grid-mixins-grid-type: skeleton !default;
17+
$flexbox-grid-mixins-box-sizing: border-box !default;
18+
$flexbox-grid-mixins-stack: margin-bottom !default;
19+
20+
@mixin grid($display: flex, $flex-direction: null, $flex-wrap: null, $flex-flow: null, $justify-content: null, $align-items: null, $align-content: null, $gutter: null)
21+
{
22+
@if $flexbox-grid-mixins-box-sizing == 'border-box' or $flexbox-grid-mixins-box-sizing == 'content-box' {
23+
box-sizing: $flexbox-grid-mixins-box-sizing;
24+
}
25+
26+
@if $display {
27+
display: $display;
28+
}
29+
30+
@if $flex-direction {
31+
flex-direction: $flex-direction;
32+
}
33+
@if $flex-wrap {
34+
flex-wrap: $flex-wrap;
35+
}
36+
37+
@if $flex-flow {
38+
flex-flow: $flex-flow;
39+
}
40+
41+
@if $justify-content {
42+
justify-content: $justify-content;
43+
}
44+
@if $align-items {
45+
align-items: $align-items;
46+
}
47+
@if $align-content {
48+
align-content: $align-content;
49+
}
50+
51+
@if $flexbox-grid-mixins-grid-type == skeleton {
52+
@if $gutter {
53+
margin-left: $gutter / 2 * -1;
54+
margin-right: $gutter / 2 * -1;
55+
}
56+
}
57+
58+
@content;
59+
}
60+
61+
@mixin grid-col($col: null, $grid-columns: 12, $col-offset: null, $gutter: null, $align-self: null, $flex-grow: 0, $flex-shrink: 1, $flex-basis: auto, $order: null, $shorthand: true, $last-child: false, $width: null, $max-width: null, $min-width: null, $height: null, $max-height: null, $min-height: null)
62+
{
63+
@if $flexbox-grid-mixins-box-sizing == 'border-box' or $flexbox-grid-mixins-box-sizing == 'content-box' {
64+
box-sizing: $flexbox-grid-mixins-box-sizing;
65+
}
66+
67+
@if meta.type-of($col) == number and math.is-unitless($col) == true {
68+
$flex-shrink: 0;
69+
$flex-basis: math.percentage($col / $grid-columns);
70+
71+
@if $flexbox-grid-mixins-grid-type == skeleton {
72+
@if $gutter and math.unit($gutter) == '%' {
73+
$flex-basis: $flex-basis - $gutter;
74+
} @else if $gutter and math.is-unitless($gutter) == false {
75+
$flex-basis: calc( #{$flex-basis} - #{$gutter});
76+
}
77+
78+
} @else if $flexbox-grid-mixins-grid-type == margin-offset {
79+
@if $gutter and math.unit($gutter) == '%' {
80+
$flex-basis: (100% - ($gutter * ($grid-columns / $col - 1))) / ($grid-columns / $col);
81+
} @else if $gutter and math.is-unitless($gutter) == false {
82+
$flex-basis: calc( #{$flex-basis} - #{$gutter * ($grid-columns / $col - 1) / ($grid-columns / $col)});
83+
}
84+
}
85+
86+
@if $col-offset and math.unit($col-offset) == '%' {
87+
$flex-basis: $flex-basis + $col-offset;
88+
} @else if $col-offset and math.is-unitless($col-offset) == false {
89+
$flex-basis: calc( #{$flex-basis} + #{$col-offset});
90+
}
91+
} @else if meta.type-of($col) == number and math.is-unitless($col) == false {
92+
$flex-grow: 0;
93+
$flex-shrink: 0;
94+
$flex-basis: $col;
95+
} @else if meta.type-of($col) == string and $col == 'auto' {
96+
// flex: auto;
97+
$flex-grow: 1;
98+
$flex-shrink: 1;
99+
$flex-basis: auto;
100+
} @else if meta.type-of($col) == string and $col == 'equal' {
101+
// flex: 1;
102+
$flex-grow: 1;
103+
$flex-shrink: 1;
104+
$flex-basis: 0;
105+
} @else if meta.type-of($col) == string and $col == 'none' {
106+
// flex: none;
107+
$flex-grow: 0;
108+
$flex-shrink: 0;
109+
$flex-basis: auto;
110+
} @else if meta.type-of($col) == string and $col == 'initial' {
111+
// flex: initial;
112+
$flex-grow: 0;
113+
$flex-shrink: 1;
114+
$flex-basis: auto;
115+
} @else if meta.type-of($col) == string and $col == 'positive' {
116+
// positive number
117+
@if $flex-grow == 0 {
118+
$flex-grow: 1;
119+
}
120+
$flex-shrink: 0;
121+
$flex-basis: 0;
122+
}
123+
124+
@if meta.type-of($shorthand) == bool and $shorthand == true {
125+
flex: $flex-grow $flex-shrink $flex-basis;
126+
} @else {
127+
flex-basis: $flex-basis;
128+
flex-grow: $flex-grow;
129+
flex-shrink: $flex-shrink;
130+
}
131+
132+
@if $align-self != null {
133+
align-self: $align-self;
134+
}
135+
136+
@if meta.type-of($order) == number {
137+
order: $order;
138+
}
139+
140+
@if meta.type-of($width) == bool and $width == true {
141+
width: $flex-basis;
142+
} @else if meta.type-of($width) == number and math.is-unitless($width) == false {
143+
width: $width;
144+
} @else if meta.type-of($width) == string and $width == 'auto' {
145+
width: auto;
146+
}
147+
148+
@if meta.type-of($max-width) == bool and $max-width == true {
149+
max-width: $flex-basis;
150+
} @else if meta.type-of($max-width) == number and math.is-unitless($max-width) == false {
151+
max-width: $max-width;
152+
} @else if meta.type-of($max-width) == string and $max-width == 'auto' {
153+
max-width: auto;
154+
}
155+
156+
@if meta.type-of($min-width) == bool and $min-width == true {
157+
min-width: $flex-basis;
158+
} @else if meta.type-of($min-width) == number and math.is-unitless($min-width) == false {
159+
min-width: $min-width;
160+
} @else if meta.type-of($min-width) == string and $min-width == 'auto' {
161+
min-width: auto;
162+
}
163+
164+
@if $height != null {
165+
height: $height;
166+
}
167+
@if $max-height != null {
168+
max-height: $max-height;
169+
}
170+
@if $min-height != null {
171+
min-height: $min-height;
172+
}
173+
174+
@if $gutter and math.is-unitless($gutter) == false {
175+
@if $flexbox-grid-mixins-grid-type == skeleton {
176+
margin-left: $gutter / 2;
177+
margin-right: $gutter / 2;
178+
} @else if $flexbox-grid-mixins-grid-type == margin-offset {
179+
@if meta.type-of($last-child) == bool and $last-child == true {
180+
margin-right: 0;
181+
} @else {
182+
margin-right: $gutter;
183+
}
184+
}
185+
186+
@if $flexbox-grid-mixins-stack == margin-top {
187+
margin-top: $gutter;
188+
} @else if $flexbox-grid-mixins-stack == margin-bottom {
189+
margin-bottom: $gutter;
190+
} @else if $flexbox-grid-mixins-stack == margin-both {
191+
margin-top: $gutter / 2;
192+
margin-bottom: $gutter / 2;
193+
}
194+
}
195+
196+
@content;
197+
}

0 commit comments

Comments
 (0)