Generated by SassMeister.com.

input.scss

%checkboxandRadioStyle {
    + label {

    &:before {
      border: 1px solid red;
      
      @at-root .checkboxtype#{&} {
          border-color: black;
      }
    }
  }
}


[type=radio],
[type=checkbox] {
  @extend %checkboxandRadioStyle;
}

/* ------- */

[type=radio],
[type=checkbox] {
  + label {

    &:before {
      border: 1px solid red;
      
      @at-root .checkboxtype#{&} {
          border-color: black;
      }
    }
  }
}

output.css

[type=radio] + label:before,
[type=checkbox] + label:before {
  border: 1px solid red;
}
.checkboxtype[type=radio] + label:before,
.checkboxtype[type=checkbox] + label:before {
  border-color: black;
}

/* ------- */
[type=radio] + label:before,
[type=checkbox] + label:before {
  border: 1px solid red;
}
.checkboxtype[type=radio] + label:before, [type=checkbox] + label:before {
  border-color: black;
}

settings.json

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