Generated by SassMeister.com.

output.css

.card.red {
  background: red;
}
.card.red.mix--blue {
  background: #0d00f2;
}
.card.blue {
  background: blue;
}
.card.blue.mix--red {
  background: #f2000d;
}
.card.purple {
  background: 150vw;
}

paintpots--modifiers.scss

$red: red;
$blue: blue;
$green: green;
$mixQuotient: 5%;
$purple: mix($red, $blue);

$mixedValues: (100vw + 50px);

// coloured cards with colour mix modifiers
.card {
    &.red {
        background: $red;
        &.mix--blue {
            background: mix( $red, $blue, $mixQuotient);
        }
    }
    &.blue {
        background: $blue;
        &.mix--red {
            background: mix($blue, $red, $mixQuotient);
        }
    }
    &.purple {
        background: $mixedValues
    }
}

settings.json

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