Skip to content

Commit 7371a4c

Browse files
thingsymthingsym
committed
feat: add $gap argument for gap CSS property
1 parent 4039613 commit 7371a4c

File tree

2 files changed

+68
-4
lines changed

2 files changed

+68
-4
lines changed

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

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ $flexbox-grid-mixins-grid-type: skeleton !default;
1717
$flexbox-grid-mixins-box-sizing: border-box !default;
1818
$flexbox-grid-mixins-stack: margin-bottom !default;
1919

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)
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, $gap: null, $row-gap: null, $column-gap: null)
2121
{
2222
@if $flexbox-grid-mixins-box-sizing == 'border-box' or $flexbox-grid-mixins-box-sizing == 'content-box' {
2323
box-sizing: $flexbox-grid-mixins-box-sizing;
@@ -55,15 +55,40 @@ $flexbox-grid-mixins-stack: margin-bottom !default;
5555
}
5656
}
5757

58+
@if $gap != null {
59+
@if length($gap) == 1 {
60+
gap: $gap;
61+
} @else if length($gap) == 2 {
62+
$row-gap: nth($gap, 1);
63+
$column-gap: nth($gap, 2);
64+
65+
row-gap: $row-gap;
66+
column-gap: $column-gap;
67+
}
68+
} @else {
69+
row-gap: $row-gap;
70+
column-gap: $column-gap;
71+
}
72+
5873
@content;
5974
}
6075

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)
76+
@mixin grid-col($col: null, $grid-columns: 12, $col-offset: null, $gutter: null, $gap: null, $row-gap: null, $column-gap: 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)
6277
{
6378
@if $flexbox-grid-mixins-box-sizing == 'border-box' or $flexbox-grid-mixins-box-sizing == 'content-box' {
6479
box-sizing: $flexbox-grid-mixins-box-sizing;
6580
}
6681

82+
@if $gap != null {
83+
@if length($gap) == 1 {
84+
$row-gap: $gap;
85+
$column-gap: $gap;
86+
} @else if length($gap) == 2 {
87+
$row-gap: nth($gap, 1);
88+
$column-gap: nth($gap, 2);
89+
}
90+
}
91+
6792
@if meta.type-of($col) == number and math.is-unitless($col) == true {
6893
$flex-shrink: 0;
6994
$flex-basis: math.percentage(math.div($col, $grid-columns));
@@ -75,6 +100,13 @@ $flexbox-grid-mixins-stack: margin-bottom !default;
75100
$flex-basis: calc( #{$flex-basis} - #{$gutter} );
76101
}
77102

103+
@if $column-gap and unit($column-gap) == '%' {
104+
$flex-basis: $flex-basis - $column-gap + $column-gap / $grid-columns * $col;
105+
} @else if $column-gap and unitless($column-gap) == false {
106+
@if ( $grid-columns != $col ) {
107+
$flex-basis: calc( #{$flex-basis} - #{$column-gap} + #{math.div($column-gap, $grid-columns) * $col});
108+
}
109+
}
78110
} @else if $flexbox-grid-mixins-grid-type == margin-offset {
79111
@if $gutter and math.unit($gutter) == '%' {
80112
$flex-basis: math.div(100% - ($gutter * (math.div($grid-columns, $col) - 1)), math.div($grid-columns, $col));

‎sass/_flexbox-grid-mixins.scss‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ $flexbox-grid-mixins-grid-type: skeleton !default;
1313
$flexbox-grid-mixins-box-sizing: border-box !default;
1414
$flexbox-grid-mixins-stack: margin-bottom !default;
1515

16-
@mixin grid($display: flex, $flex-direction: null, $flex-wrap: null, $flex-flow: null, $justify-content: null, $align-items: null, $align-content: null, $gutter: null)
16+
@mixin grid($display: flex, $flex-direction: null, $flex-wrap: null, $flex-flow: null, $justify-content: null, $align-items: null, $align-content: null, $gutter: null, $gap: null, $row-gap: null, $column-gap: null)
1717
{
1818
@if $flexbox-grid-mixins-box-sizing == 'border-box' or $flexbox-grid-mixins-box-sizing == 'content-box' {
1919
box-sizing: $flexbox-grid-mixins-box-sizing;
@@ -51,15 +51,40 @@ $flexbox-grid-mixins-stack: margin-bottom !default;
5151
}
5252
}
5353

54+
@if $gap != null {
55+
@if length($gap) == 1 {
56+
gap: $gap;
57+
} @else if length($gap) == 2 {
58+
$row-gap: nth($gap, 1);
59+
$column-gap: nth($gap, 2);
60+
61+
row-gap: $row-gap;
62+
column-gap: $column-gap;
63+
}
64+
} @else {
65+
row-gap: $row-gap;
66+
column-gap: $column-gap;
67+
}
68+
5469
@content;
5570
}
5671

57-
@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)
72+
@mixin grid-col($col: null, $grid-columns: 12, $col-offset: null, $gutter: null, $gap: null, $row-gap: null, $column-gap: 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)
5873
{
5974
@if $flexbox-grid-mixins-box-sizing == 'border-box' or $flexbox-grid-mixins-box-sizing == 'content-box' {
6075
box-sizing: $flexbox-grid-mixins-box-sizing;
6176
}
6277

78+
@if $gap != null {
79+
@if length($gap) == 1 {
80+
$row-gap: $gap;
81+
$column-gap: $gap;
82+
} @else if length($gap) == 2 {
83+
$row-gap: nth($gap, 1);
84+
$column-gap: nth($gap, 2);
85+
}
86+
}
87+
6388
@if type-of($col) == number and unitless($col) == true {
6489
$flex-shrink: 0;
6590
$flex-basis: percentage($col / $grid-columns);
@@ -71,6 +96,13 @@ $flexbox-grid-mixins-stack: margin-bottom !default;
7196
$flex-basis: calc( #{$flex-basis} - #{$gutter});
7297
}
7398

99+
@if $column-gap and unit($column-gap) == '%' {
100+
$flex-basis: $flex-basis - $column-gap + $column-gap / $grid-columns * $col;
101+
} @else if $column-gap and unitless($column-gap) == false {
102+
@if ( $grid-columns != $col ) {
103+
$flex-basis: calc( #{$flex-basis} - #{$column-gap} + #{$column-gap / $grid-columns * $col});
104+
}
105+
}
74106
} @else if $flexbox-grid-mixins-grid-type == margin-offset {
75107
@if $gutter and unit($gutter) == '%' {
76108
$flex-basis: (100% - ($gutter * ($grid-columns / $col - 1))) / ($grid-columns / $col);

0 commit comments

Comments
 (0)