Generated by SassMeister.com.

input.scss

.rating {
    &__bar {
        // Generate our rating__bar data selectors.
        @for $i from 0 through 10 {
            &[data-value="#{$i}"] {
                &:before{
                    width: $i * 10%;
                }
                &:after{
                    left: $i * 10%;
                }
            }
        }
    }
}

output.css

.rating__bar[data-value="0"]:before {
  width: 0%;
}
.rating__bar[data-value="0"]:after {
  left: 0%;
}
.rating__bar[data-value="1"]:before {
  width: 10%;
}
.rating__bar[data-value="1"]:after {
  left: 10%;
}
.rating__bar[data-value="2"]:before {
  width: 20%;
}
.rating__bar[data-value="2"]:after {
  left: 20%;
}
.rating__bar[data-value="3"]:before {
  width: 30%;
}
.rating__bar[data-value="3"]:after {
  left: 30%;
}
.rating__bar[data-value="4"]:before {
  width: 40%;
}
.rating__bar[data-value="4"]:after {
  left: 40%;
}
.rating__bar[data-value="5"]:before {
  width: 50%;
}
.rating__bar[data-value="5"]:after {
  left: 50%;
}
.rating__bar[data-value="6"]:before {
  width: 60%;
}
.rating__bar[data-value="6"]:after {
  left: 60%;
}
.rating__bar[data-value="7"]:before {
  width: 70%;
}
.rating__bar[data-value="7"]:after {
  left: 70%;
}
.rating__bar[data-value="8"]:before {
  width: 80%;
}
.rating__bar[data-value="8"]:after {
  left: 80%;
}
.rating__bar[data-value="9"]:before {
  width: 90%;
}
.rating__bar[data-value="9"]:after {
  left: 90%;
}
.rating__bar[data-value="10"]:before {
  width: 100%;
}
.rating__bar[data-value="10"]:after {
  left: 100%;
}

settings.json

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