Discover a SCSS mixin for creating flexbox/grid layouts HERE.
Take a look at the complete mixin code below:
@mixin grid-col(
$col: null,
$grid-columns: 12,
$col-offset: null,
$gutter: null,
$condensed: false,
$align-self: null,
$flex-grow: 0,
$flex-shrink:1,
$flex-basis: auto,
$order: null,
$grid-type: skeleton,
$last-child: false
){
@if type-of($col) == number and unitless($col) == true {
// Code logic here...
} @else if type-of($col) == number and unitless($col) == false {
// More code logic here...
}
@content;
}
The parameters in this mixin might be confusing to some, like $condensed: false,. While experienced with flexbox and Scss, this mixin complexity is daunting.
Specifically puzzling is this part of the mixin:
@else if $grid-type == margin-offset {
@if $gutter and unit($gutter) == '%' {
$flex-basis: (100% - ($gutter * ($grid-columns / $col - 1))) / ($grid-columns / $col);
} @else if $gutter and unitless($gutter) == false {
$flex-basis: calc( #{$flex-basis} - #{$gutter * ($grid-columns / $col - 1) / ($grid-columns / $col)} );
}
}
Seeking clarification on the above code snippet. Can anyone elaborate on this section?