Creates some basic CSS

columns.scss

/**
 * Creates the boilerplate CSS for flexbox columns. 
 * Apply to a container where its immediate descendants have a class name of 
 * "col-#" where # is the number of columns you would see in a row
 * You can provide a map of width overrides where you specify screen width and your desired column count
 * @param  {string} $base_col_class    The base column class: ex: cols-4 will create 4 25% width columns in your "row"
 * @param  {integer}    $min:           1            The number to begin iteration at
 * @param  {integer}    $max:           6            The number to end iteration at
 * @param  {map}        $breakpoints    ()           A map consisting of the width breakpoint for keys and the column count for value
 * @param  {string}     $full_breakout_width         The screen dimensions where columns will have their "default" characteristics
 * @param  {string} $gutter:           '20px'        The spacing between elements. This uses flexbox justify-content: space-between
 * @return {string}                                  A lot of CSS lol
 */
@mixin columnsContainer($base_col_class, $full_breakout_width,  $min: 1, $max: 6, $breakpoints: (), $gutter: 20px) {
    display: flex;    
    justify-content: flex-start;
    flex-flow: row wrap;
    padding-left: $gutter;
  
    // all columns start at 100% width
    > [class*="#{$base_col_class}"] {
        width: calc(100% - #{$gutter});
        height: auto;
    }
  
    @each $minWidth, $colCount in $breakpoints {
        @if($full_breakout_width > $minWidth) {
            @media(min-width: $minWidth) {
                @for $i from $colCount through $max {
                    @include _columnsWidths($base_col_class, $i, $gutter, $colCount);
                }
            }
        }
    }

    @media(min-width: $full_breakout_width) {
        @for $i from $min through $max {
            @include _columnsWidths($base_col_class, $i, $gutter);
        }
    }
}

/**
 * Basically called by columnsContainer mixin, but can be used anywhere I guess
 * Returns 100% divided by $i with the base class prepended
 *
 * Ex: @include columnsWidths('base',3)
 * will return .base-3 {width: calc(100% / 3);}
 */
/**
 * Creates a CSS class for creating columns from some variables
 * @param  {string} $base_class                 The "prepend" for the column class: ex: If your column class is "cols-2" provide "cols"
 * @param  {integer} $i                         Iteration index
 * @param  {string} $gutter                     The amount of space between columns
 * @param  {integer} $override:  null           Pass in a number to override columns, used for responsive CSS. ex: pass in 2, will return 50% columns with gutters accounted for no matter what
 * @return {string}                             A bunch of CSS
 */
@mixin _columnsWidths($base_class, $i, $gutter: 10px, $override: null) {
    @if($override) {
        .#{$base_class}-#{$i} {
            width: calc(100% / #{$override} - #{$gutter});
            margin-right: #{$gutter};
        }
    } @else {
        .#{$base_class}-#{$i} {
            width: calc(100% / #{$i} - #{$gutter});
            margin-right: #{$gutter};
        }
    }

}