Generated by SassMeister.com.

input.scss

$breakpoint-zero: 0;
$breakpoint-xs-min: 480px;
$breakpoint-sm-min: 768px;
$breakpoint-md-min: 992px;
$breakpoint-lg-min: 1200px;

$breakpoint-xxs-max: $breakpoint-xs-min - 1;
$breakpoint-xs-max: $breakpoint-sm-min - 1;
$breakpoint-sm-max: $breakpoint-md-min - 1;
$breakpoint-md-max: $breakpoint-lg-min - 1;

/* Max widths */
$max-width-sm: #{$breakpoint-sm-min - $box-padding * 2};
$max-width-md: #{$breakpoint-md-min - $box-padding * 2};
$max-width-lg: #{$breakpoint-lg-min - $box-padding * 2};

/* gutter */
$gutter-sm: 16px;
$gutter-md: 24px;
$gutter-lg: 30px;

/* column width */
$column-sm: (($breakpoint-sm-min - $box-padding * 2) - ($gutter-sm * 11)) / 12;
$column-md: (($breakpoint-md-min - $box-padding * 2) - ($gutter-md * 11)) / 12;
$column-lg: (($breakpoint-lg-min - $box-padding * 2) - ($gutter-lg * 11)) / 12;

@mixin aside(
    $side: "left",
    $sidebar-sm: $aside-sm,
    $content-min: 588px,
    $query: "bp",
    $swap: false,
    $sidebar-md: $aside-lg,
    $sidebar-lg: $aside-lg,
    $custom-margin-sm: $column-sm,
    $custom-margin-md: $column-md,
    $custom-margin-lg: $column-lg
) {
    $content-sm: $sidebar-sm + $box-padding;
    $content-md: $sidebar-md + $box-padding;
    $content-lg: $sidebar-lg + $box-padding;
    $custom-bp: $breakpoint-sm-min; //$content-min + $sidebar-sm;

    @if ($custom-margin-sm != null) or
        ($custom-margin-md != null) or
        ($custom-margin-lg != null)
    {
        $content-sm: $sidebar-sm + $custom-margin-sm;
        $content-md: $sidebar-md + $custom-margin-md;
        $content-lg: $sidebar-lg + $custom-margin-lg;
    }

    // separate bp and eq values for better control of usage of space
    $eq-sidebar-sm: $sidebar-sm;
    $eq-sidebar-md: $sidebar-md;
    $eq-sidebar-lg: $sidebar-lg; // update to 300 when drupal blog stream image style is updated
    $eq-content-sm: $eq-sidebar-sm + $box-padding;
    $eq-content-md: $eq-sidebar-md + $box-padding;
    $eq-content-lg: $eq-sidebar-lg + $box-padding;

    $one: "&:first-child";
    $two: "&:not(:first-child)";
    // flip sides, depending on if the sidebar is on the left or right
    @if $side == "right" {
        $one: "&:not(:first-child)";
        $two: "&:first-child";
    }
    @include clearfix;
    @include breakpoint($breakpoint-md-min) {
        display: flex;
        flex-direction: row;
    }

    @if $query == "bp" and $swap == false {
        @include breakpoint($custom-bp) {
            flex-direction: row;
        }
        > * {
            flex-grow: 1;
            @include breakpoint($content-min) {
                float: left;
                width: 100%;
            }
            @include breakpoint(($custom-bp - 1px) max-width) {
                margin-bottom: $vertical-gutter;
                clear: both;
                &:last-child {
                    margin-bottom: 0;
                }
            }
            #{$one} {
                @include breakpoint($custom-bp) {
                    width: $sidebar-sm;
                }
                @include breakpoint($breakpoint-md-min) {
                    width: $sidebar-md;
                }
                @include breakpoint($breakpoint-lg-min) {
                    width: $sidebar-lg;
                }
            }
            #{$two} {
                @include breakpoint($custom-bp) {
                    width: calc(100% - #{$content-sm});
                    @if $custom-margin-sm != null {
                        margin-#{$side}: floor($custom-margin-sm);
                    } @else {
                        margin-#{$side}: $susy-gutter;
                    }
                }
                @include breakpoint($breakpoint-md-min) {
                    width: calc(100% - #{$content-md});
                    @if $custom-margin-md != null {
                        margin-#{$side}: floor($custom-margin-md);
                    }
                }
                @include breakpoint($breakpoint-lg-min) {
                    width: calc(100% - #{$content-lg});
                    @if $custom-margin-lg != null {
                        margin-#{$side}: floor($custom-margin-lg);
                    }
                }
            }
        }
    } @else if $query == "bp" and $swap == true {
        @include breakpoint($custom-bp) {
            display: flex;
            flex-direction: row-reverse;
        }
        > * {
            flex-grow: 1;
            @include breakpoint($content-min) {
                float: left;
                width: 100%;
            }
            @include breakpoint(($custom-bp - 1px) max-width) {
                margin-bottom: $vertical-gutter;
                clear: both;
                &:last-child {
                    margin-bottom: 0;
                }
            }
            #{$two} {
                @include breakpoint($custom-bp) {
                    width: $sidebar-sm;
                }
                @include breakpoint($breakpoint-md-min) {
                    width: $sidebar-md;
                }
                @include breakpoint($breakpoint-lg-min) {
                    width: $sidebar-lg;
                }
            }
            #{$one} {
                @include breakpoint($custom-bp) {
                    width: calc(100% - #{$content-sm});
                    @if $custom-margin-sm != null {
                        margin-#{$side}: floor($custom-margin-sm);
                    } @else {
                        margin-#{$side}: $susy-gutter;
                    }
                }
                @include breakpoint($breakpoint-md-min) {
                    width: calc(100% - #{$content-md});
                    @if $custom-margin-md != null {
                        margin-#{$side}: floor($custom-margin-md);
                    }
                }
                @include breakpoint($breakpoint-lg-min) {
                    width: calc(100% - #{$content-lg});
                    @if $custom-margin-lg != null {
                        margin-#{$side}: floor($custom-margin-lg);
                    }
                }
            }
        }
    } @else if $query == "eq" {
        @include eq-context(submedium) {
            flex-direction: row;
        }
        > * {
            width: 100%;
            @if strip-unit($eq-sidebar-sm) < 200 {
                margin-bottom: #{$vertical-gutter / 2};
            } @else {
                margin-bottom: $vertical-gutter;
            }
            clear: both;
            &:last-child {
                margin-bottom: 0;
            }
            @include eq-context(submedium, medium, large) {
                float: left;
                clear: none;
                margin-bottom: 0;
            }
            #{$one} {
                max-width: $eq-sidebar-lg;
                @include eq-context(submedium) {
                    width: $eq-sidebar-md;
                }
                @include eq-context(medium, large) {
                    width: $eq-sidebar-lg;
                }
            }
            #{$two} {
                @include eq-context(submedium) {
                    max-width: none;
                    width: calc(100% - #{$eq-content-md});
                    @if strip-unit($eq-sidebar-sm) < 200 {
                        margin-#{$side}: #{$box-padding / 2};
                        width: calc(
                            100% - #{$eq-sidebar-md + $box-padding / 2}
                        );
                    } @else {
                        margin-#{$side}: $box-padding;
                    }
                }
                @include eq-context(medium, large) {
                    max-width: none;
                    width: calc(100% - #{$eq-content-lg});
                    @if strip-unit($eq-sidebar-sm) < 200 {
                        margin-#{$side}: #{$box-padding / 2};
                        width: calc(
                            100% - #{$eq-sidebar-md + $box-padding / 2}
                        );
                    } @else {
                        margin-#{$side}: $box-padding;
                    }
                }
            }
        }
    } @else {
        @warn "Your query should be bp or eq!";
        @content;
    }
}
.foo {
    @include aside;
}

.container {
   max-width: 1200px;
   margin: auto;
   display: flex;
   flex-direction: row;
}
article {
    padding: 20px;
    background: yellow;
    flex-grow: 1;
}
aside {
    padding: 20px;
    background: pink;
    width: 360px;
    margin: 60px;
}

markup.html

<div class="container">
    <article>hello world</article>
    <aside>oh hai</aside>
</div>

output.css

.container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-direction: row;
}

article {
  padding: 20px;
  background: yellow;
  flex-grow: 1;
}

aside {
  padding: 20px;
  background: pink;
  width: 360px;
  margin: 60px;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}