Generated by SassMeister.com.

input.scss

@import "color-helpers";

// Breakpoint widths
// INTERNAL: If these values change, the values used for the responsive previews
// in the documentation should also change.
$width-xs: 0 !default;
$width-sm: 544px !default;
$width-md: 768px !default;
$width-lg: 1024px !default;
$width-xl: 1280px !default;

$color-secondary-lightest: #fff000;
$color-secondary-light: #fff;
$width-sm: 536px;


// Breakpoints
$breakpoints: (
  sm: $width-sm,
  md: $width-md,
  lg: $width-lg,
  xl: $width-xl,
) !default;

@each $breakpoint in map-keys($breakpoints) {
  $value: map-get($breakpoints, $breakpoint);
  .mct-u-#{$breakpoint}-display--inline-block {
    display: none;
    @media (min-width: calc(#{$value} + 1px)) {
      display: inline-block !important;
    }
  }
  .mct-u-#{$breakpoint}-display--inline {
    display: none;
    @media (min-width: calc(#{$value} + 1px)) {
      display: inline !important;
    }
  }
  .mct-u-#{$breakpoint}-display--block {
    display: none;
    @media (min-width: calc(#{$value} + 1px)) {
      display: block !important;
    }
  }
  .mct-u-#{$breakpoint}-display--none {
    @media (min-width: calc(#{$value} + 1px)) {
      display: none !important;
    }
  }
}

@each $breakpoint in map-keys($breakpoints) {
  $value: map-get($breakpoints, $breakpoint);
  .mct-u-#{$breakpoint}-width--full {
    @media screen and (max-width: #{$value}) {
      width: 100%;
    }
  }
}

.some-class {
    &:not(.some-other-class):not(.yet-another-class) {
        color:pink;
    }
}

.ds-c-alert {
  &:not(.ds-c-alert--warn):not(.ds-c-alert--success):not(.ds-c-alert--error) {
    background-color: $color-secondary-lightest;
    border-color: $color-secondary-light;
    color: #212121;
  }
  .previewBanner & {
    @media screen and (max-width: $width-sm) {
      background-position: 8px 8px;
      background-size: 32px;
      font-size: 16px;
      line-height: 1.25;
      padding: 8px;

      .ds-c-alert__body {
        padding-left: 40px;
      }
    }
  }
}

.ds-c-button {
    &--disabled {
        color: grey;
    }
    &--primary-alt {
        font-weight: bold;
    }
}

.ds-c-button--primary-alt:disabled {
  &:active,
  &:hover,
  &:focus {
    @extend .ds-c-button--disabled, .ds-c-button--primary-alt;
  }
}

.ds-c-button {
  font-weight: normal;
  &.mct-u-width--full {
    &.mct-u-sm-width--auto,
    &.mct-u-md-width--auto {
      padding-left: 0;
      padding-right: 0;
    }
    &.mct-u-sm-width--auto {
      @media screen and (min-width: 536px) {
        padding-left: 3px;
        padding-right: 3px;
      }
    }
    &.mct-u-md-width--auto {
      @media screen and (min-width: 750px) {
        padding-left: 3px;
        padding-right: 3px;
      }
    }
  }
}

.foo {
    & .bar {
        color: green;
    }
    .bar {
        background: blue;
    }

    input {
        color: yellow;
    }
    &.bar {
        color: white;
    }
}

.foobar {
    $f: &;
    &--extra {
        $s: &; 
        &:not(#{$s}-special) {
            color: blue;
        }
    }
}

h1 {
    &:focus {
        outline: 0;
    }
}

.foo {
    @media screen and (min-width: 755px) {
        > [class^="bar"] {
            color: green;
        }
    }
}

.foo {
    .bar > & {
        color: green;
    }
}

$spacer-3: 16px;

%mct-c-summary-page-card--medium {
  padding: $spacer-3;
  width: 540px;
  margin-right: $spacer-3;

  @media screen and (max-width: $width-md) {
    width: 355px;
  }
  @media screen and (max-width: $width-sm) {
    width: auto;
    margin: 0 0 $spacer-3;
  }
  @media print {
    border: none;
    box-shadow: none;
    display: block;
    margin: 0 $spacer-3 0;
    min-height: auto;
    padding: 0 !important;
    width: 490px;
  }
}

.some-extending-class {
    @extend %mct-c-summary-page-card--medium;
}

.some-other-extending-class {
    @extend %mct-c-summary-page-card--medium;
}

.some-class {
    $c: &;
    &:not(#{$c}#{$c}--some-modifier) {
        background: pink;
    }
}

.some-class {
  &:not(&--some-modifier) {
      background-color: pink;
      color: green;
    }
}

.mct-c-benefit {
    $base: &;
    &:not(#{$base}--is-suppressed) {
      &:not(.PlanCard__copay) {
        :not(#{$base}__extra-content) {
          color: blue;
        }
      }
    }
  }
  
.foo {
    $f: &;
    &:not(#{$f} > *) {
        color: pink;
    }
    > * {
        background-color: yellow;
    }
}

.foo:not(.foo > *) {
    text-transform: uppercase;
}

.foo > * {
    font-style: italic;
}

.foo:nth-child(n) {
    font-weight: bold;
}

// Teal/Primary
$teal-700: #0f4b42;
$teal-500: #146a5d;
$teal-300: #409e90;
$teal-100: #e0f2f1;

// Blue/Primary Alt
$blue-700: #12284d;
$blue-500: #1e3c70;
$blue-300: #4f6b9b;
$blue-100: #e8f1ff;
$color-secondary: $blue-500;
$color-secondary-dark: darken($color-secondary, 60%);
$color-secondary-darker: $color-secondary-dark;
$color-secondary-dark-scale: scale-color($color-secondary, $lightness: -60%);
$color-secondary-darker-scale: $color-secondary-dark-scale;

$color-primary-alt: $blue-500;
$color-primary-alt-dark: $blue-700;
$color-primary-alt-darker: darken($color-primary-alt, 10%);
$color-primary-alt-darkest: darken($color-primary-alt, 20%);
$color-primary-alt-light: $blue-300;
$color-primary-alt-lightest: $blue-100;

$color-primary-alt-darker-scale: scale-color($color-primary-alt, $lightness: -10%);
$color-primary-alt-darkest-scale: scale-color($color-primary-alt, $lightness: -20%);

.color-block {
    margin: 10px 0;
    width: 200px;
    height: 200px;
}
.color-secondary-darker {
    background-color: $color-secondary-darker;
}

.color-secondary-darker-scale {
    background-color: $color-secondary-darker-scale;
}

.color-primary-alt-darker {
    background-color: $color-primary-alt-darker;
}

.color-primary-alt-darkest {
    background-color: $color-primary-alt-darkest;
}

.color-primary-alt-darker-scale {
    background-color: $color-primary-alt-darker-scale;
}

.color-primary-alt-darkest-scale {
    background-color: $color-primary-alt-darkest-scale;
}

.some-random-name {
    $base: &;
    .some-child {
        &:not(#{$base}--some-suffix &) {
            color: blue;
        }
    }
}

.foo {
    &-bar {
        &__baz-gah {
            &-fiz:not(&-fiz:last-of-type) {
                color: green;
            }
        }
    }
}

.base-class {
    $root: &;
    #{$root}__el-one + #{$root}__el-two {
       color: green;
    }
}

markup.html

<div class="foo">
    pink
    <span class="woo">not pink?
        <span class="gaz">what here?</span>
    </span>
    <div class="color-block color-secondary-darker"></div>
    <div class="color-block color-secondary-darker-scale"></div>
</div>

<div class="some-random-name">
    <div class="some-child">
        I should be blue
    </div>
</div>
<div class="some-random-name--some-suffix">
    <div class="some-child">
        I should not be blue
    </div>
</div>
<div class="base-class">
    <div class="base-class__el-one">
        One
    </div>
    <div class="base-class__el-one">
        Two
    </div>
</div>

output.css

.mct-u-sm-display--inline-block {
  display: none;
}
@media (min-width: calc(536px + 1px)) {
  .mct-u-sm-display--inline-block {
    display: inline-block !important;
  }
}

.mct-u-sm-display--inline {
  display: none;
}
@media (min-width: calc(536px + 1px)) {
  .mct-u-sm-display--inline {
    display: inline !important;
  }
}

.mct-u-sm-display--block {
  display: none;
}
@media (min-width: calc(536px + 1px)) {
  .mct-u-sm-display--block {
    display: block !important;
  }
}

@media (min-width: calc(536px + 1px)) {
  .mct-u-sm-display--none {
    display: none !important;
  }
}

.mct-u-md-display--inline-block {
  display: none;
}
@media (min-width: calc(768px + 1px)) {
  .mct-u-md-display--inline-block {
    display: inline-block !important;
  }
}

.mct-u-md-display--inline {
  display: none;
}
@media (min-width: calc(768px + 1px)) {
  .mct-u-md-display--inline {
    display: inline !important;
  }
}

.mct-u-md-display--block {
  display: none;
}
@media (min-width: calc(768px + 1px)) {
  .mct-u-md-display--block {
    display: block !important;
  }
}

@media (min-width: calc(768px + 1px)) {
  .mct-u-md-display--none {
    display: none !important;
  }
}

.mct-u-lg-display--inline-block {
  display: none;
}
@media (min-width: calc(1024px + 1px)) {
  .mct-u-lg-display--inline-block {
    display: inline-block !important;
  }
}

.mct-u-lg-display--inline {
  display: none;
}
@media (min-width: calc(1024px + 1px)) {
  .mct-u-lg-display--inline {
    display: inline !important;
  }
}

.mct-u-lg-display--block {
  display: none;
}
@media (min-width: calc(1024px + 1px)) {
  .mct-u-lg-display--block {
    display: block !important;
  }
}

@media (min-width: calc(1024px + 1px)) {
  .mct-u-lg-display--none {
    display: none !important;
  }
}

.mct-u-xl-display--inline-block {
  display: none;
}
@media (min-width: calc(1280px + 1px)) {
  .mct-u-xl-display--inline-block {
    display: inline-block !important;
  }
}

.mct-u-xl-display--inline {
  display: none;
}
@media (min-width: calc(1280px + 1px)) {
  .mct-u-xl-display--inline {
    display: inline !important;
  }
}

.mct-u-xl-display--block {
  display: none;
}
@media (min-width: calc(1280px + 1px)) {
  .mct-u-xl-display--block {
    display: block !important;
  }
}

@media (min-width: calc(1280px + 1px)) {
  .mct-u-xl-display--none {
    display: none !important;
  }
}

@media screen and (max-width: 536px) {
  .mct-u-sm-width--full {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .mct-u-md-width--full {
    width: 100%;
  }
}

@media screen and (max-width: 1024px) {
  .mct-u-lg-width--full {
    width: 100%;
  }
}

@media screen and (max-width: 1280px) {
  .mct-u-xl-width--full {
    width: 100%;
  }
}

.some-class:not(.some-other-class):not(.yet-another-class) {
  color: pink;
}

.ds-c-alert:not(.ds-c-alert--warn):not(.ds-c-alert--success):not(.ds-c-alert--error) {
  background-color: #fff000;
  border-color: #fff;
  color: #212121;
}
@media screen and (max-width: 536px) {
  .previewBanner .ds-c-alert {
    background-position: 8px 8px;
    background-size: 32px;
    font-size: 16px;
    line-height: 1.25;
    padding: 8px;
  }
  .previewBanner .ds-c-alert .ds-c-alert__body {
    padding-left: 40px;
  }
}

.ds-c-button--disabled, .ds-c-button--primary-alt:disabled:active, .ds-c-button--primary-alt:disabled:hover, .ds-c-button--primary-alt:disabled:focus {
  color: grey;
}
.ds-c-button--primary-alt, .ds-c-button--primary-alt:disabled:active, .ds-c-button--primary-alt:disabled:hover, .ds-c-button--primary-alt:disabled:focus {
  font-weight: bold;
}

.ds-c-button {
  font-weight: normal;
}
.ds-c-button.mct-u-width--full.mct-u-sm-width--auto, .ds-c-button.mct-u-width--full.mct-u-md-width--auto {
  padding-left: 0;
  padding-right: 0;
}
@media screen and (min-width: 536px) {
  .ds-c-button.mct-u-width--full.mct-u-sm-width--auto {
    padding-left: 3px;
    padding-right: 3px;
  }
}
@media screen and (min-width: 750px) {
  .ds-c-button.mct-u-width--full.mct-u-md-width--auto {
    padding-left: 3px;
    padding-right: 3px;
  }
}

.foo .bar {
  color: green;
}
.foo .bar {
  background: blue;
}
.foo input {
  color: yellow;
}
.foo.bar {
  color: white;
}

.foobar--extra:not(.foobar--extra-special) {
  color: blue;
}

h1:focus {
  outline: 0;
}

@media screen and (min-width: 755px) {
  .foo > [class^=bar] {
    color: green;
  }
}

.bar > .foo {
  color: green;
}

.some-other-extending-class, .some-extending-class {
  padding: 16px;
  width: 540px;
  margin-right: 16px;
}
@media screen and (max-width: 768px) {
  .some-other-extending-class, .some-extending-class {
    width: 355px;
  }
}
@media screen and (max-width: 536px) {
  .some-other-extending-class, .some-extending-class {
    width: auto;
    margin: 0 0 16px;
  }
}
@media print {
  .some-other-extending-class, .some-extending-class {
    border: none;
    box-shadow: none;
    display: block;
    margin: 0 16px 0;
    min-height: auto;
    padding: 0 !important;
    width: 490px;
  }
}

.some-class:not(.some-class.some-class--some-modifier) {
  background: pink;
}

.some-class:not(.some-class--some-modifier) {
  background-color: pink;
  color: green;
}

.mct-c-benefit:not(.mct-c-benefit--is-suppressed):not(.PlanCard__copay) :not(.mct-c-benefit__extra-content) {
  color: blue;
}

.foo:not(.foo > *) {
  color: pink;
}
.foo > * {
  background-color: yellow;
}

.foo:not(.foo > *) {
  text-transform: uppercase;
}

.foo > * {
  font-style: italic;
}

.foo:nth-child(n) {
  font-weight: bold;
}

.color-block {
  margin: 10px 0;
  width: 200px;
  height: 200px;
}

.color-secondary-darker {
  background-color: black;
}

.color-secondary-darker-scale {
  background-color: #0c182d;
}

.color-primary-alt-darker {
  background-color: #132648;
}

.color-primary-alt-darkest {
  background-color: #081120;
}

.color-primary-alt-darker-scale {
  background-color: #1b3665;
}

.color-primary-alt-darkest-scale {
  background-color: #18305a;
}

.some-random-name .some-child:not(.some-random-name--some-suffix .some-random-name .some-child) {
  color: blue;
}

.foo-bar__baz-gah-fiz:not(.foo-bar__baz-gah-fiz:last-of-type) {
  color: green;
}

.base-class .base-class__el-one + .base-class__el-two {
  color: green;
}

settings.json

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