Generated by SassMeister.com.

input.scss

@use "sass:selector";

.er__weaponDetail {
    $weapon-detail-weapon-image-size: 155px;
    
    .er__weaponDetail__imageColumn {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-end;
        justify-content: end;
        height: 50%;
    }
    .er__weaponDetail__imageWrapper {
        width:  $weapon-detail-weapon-image-size;
        height: $weapon-detail-weapon-image-size;
        padding: 5px;

        @at-root ".{&}--empty" {
            width:  $weapon-detail-weapon-image-size;
            height: $weapon-detail-weapon-image-size;
            div:before {
                content: "";
                display: block;
            }
        }
    }
}

output.css

.er__weaponDetail .er__weaponDetail__imageColumn {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: end;
  height: 50%;
}
.er__weaponDetail .er__weaponDetail__imageWrapper {
  width: 155px;
  height: 155px;
  padding: 5px;
}
.er__weaponDetail .er__weaponDetail__imageWrapper.empty {
  width: 155px;
  height: 155px;
}
.er__weaponDetail .er__weaponDetail__imageWrapper.empty div:before {
  content: "";
  display: block;
}

settings.json

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