Generated by SassMeister.com.

input.scss

.foo {
  width: max(10px, env(safe-area-inset-left));
  background-clip: border-box;
  -webkit-box-reflect: below 5px url(mask.png);
  filter: grayscale(50%);
  word-break: break-word;
  -webkit-hyphens: auto;
}

@mixin foobar {
    display: flex;
    transition: all;
}
@mixin baz {
    @include foobar;
    font-weight: 400;
}

.foo {
    color: red;
    .bar {
        color: green;
        background: red;
    }
    & .baz {
        color: gold;
    }
    .baz & {
        color: crimson;
        @include baz;
    }
}

$foo: foobar;

a {
    color: $foo;
}

@supports ( display: flexbox ) {
  body { display: flexbox; }
  .foo { @include foobar; }
}

output.css

.foo {
  width: max(10px, env(safe-area-inset-left));
  background-clip: border-box;
  -webkit-box-reflect: below 5px url(mask.png);
  filter: grayscale(50%);
  word-break: break-word;
  -webkit-hyphens: auto;
}

.foo {
  color: red;
}
.foo .bar {
  color: green;
  background: red;
}
.foo .baz {
  color: gold;
}
.baz .foo {
  color: crimson;
  display: flex;
  transition: all;
  font-weight: 400;
}

a {
  color: foobar;
}

@supports (display: flexbox) {
  body {
    display: flexbox;
  }

  .foo {
    display: flex;
    transition: all;
  }
}

settings.json

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