Generated by SassMeister.com.

input.scss

@import "breakpoint";

@mixin clearfix($type: standard) {
    &::after {
        clear: both;
        @if $type == standard {
            content: "";
            display: table;
        } @else if $type == inline {
            content: " ";
            font-size: 0;
        }
    }
}

$band-padding: 60px; // this has updated to css var below
$box-padding: 30px;
$box-padding-thin: 15px;
$box-padding-xsmall: 10px;
$box-padding-xxsmall: 6px;
$box-padding-accordion: 15px 25px;
$customer-success-card-padding: 20px;
$accordion-padding: 15px;


$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;
$vertical-gutter: 30px;



@mixin aside(
    $side: "left",
    $content-min: 588px,
    $query: "bp",
    $swap: false,
    $sidebar-sm: 280px,
    $sidebar-md: 300px,
    $sidebar-lg: 360px,
    $margin-sm: 30px,
    $margin-md: 40px,
    $margin-lg: 60px,
    $custom-bp: $breakpoint-sm-max
) {
    
    $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;
                    margin-#{$side}: floor($margin-sm);
                }
                @include breakpoint($breakpoint-md-min) {
                    width: $sidebar-md;
                    margin-#{$side}: floor($margin-md);
                }
                @include breakpoint($breakpoint-lg-min) {
                    width: $sidebar-lg;
                    margin-#{$side}: floor($margin-lg);
                }
            }
        }
    }
}
.foo {
    color:pink;@import "breakpoint";

}
.container {
   max-width: 1200px;
   margin: auto;
   display: flex;
   flex-direction: row;
   @include aside;
}
article {
    padding: 20px;
    background: orange;
    //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

/* Max widths */
/* gutter */
.foo {
  color: pink;
}

.container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-direction: row;
}
.container::after {
  clear: both;
  content: "";
  display: table;
}
@media (min-width: 992px) {
  .container {
    display: flex;
    flex-direction: row;
  }
}
@media (min-width: 991px) {
  .container {
    flex-direction: row;
  }
}
.container > * {
  flex-grow: 1;
}
@media (min-width: 588px) {
  .container > * {
    float: left;
    width: 100%;
  }
}
@media (max-width: 990px) {
  .container > * {
    margin-bottom: 30px;
    clear: both;
  }
  .container > *:last-child {
    margin-bottom: 0;
  }
}
@media (min-width: 991px) {
  .container > *:first-child {
    width: 280px;
    margin-left: 30px;
  }
}
@media (min-width: 992px) {
  .container > *:first-child {
    width: 300px;
    margin-left: 40px;
  }
}
@media (min-width: 1200px) {
  .container > *:first-child {
    width: 360px;
    margin-left: 60px;
  }
}

article {
  padding: 20px;
  background: orange;
}

aside {
  padding: 20px;
  background: pink;
}

settings.json

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