Generated by SassMeister.com.

input.scss

.input-field {
    $color: red;
    $size: 25em / 16;
    color: $color;
    font-size: $size;
    
    // Regular nested class
    .input-field--error {
        color: red;
    }
    
    // Using Sass's ampersand.
    &--error {
        color: red;
    }
    
    &__label {
        color: inherit;
    
        &--important {
            font-weight: bold;
        }
    }

    &__label {
        user-select: all;
        margin: 0.5em auto;
    }
}

output.css

.input-field {
  color: red;
  font-size: 1.5625em;
}
.input-field .input-field--error {
  color: red;
}
.input-field--error {
  color: red;
}
.input-field__label {
  color: inherit;
}
.input-field__label--important {
  font-weight: bold;
}
.input-field__label {
  user-select: all;
  margin: 0.5em auto;
}

settings.json

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