Sass control directive @for with whole and decimal numbers

Question

I'd like to suffix whole number and decimal numbers to a CSS class selector with that very value passed on as a percent.

For example:

.percentage-100 would have a width of 100% - this works.

.percentage-50.5 would have a width width of 50.5% - this does not work.

That said, my Sass control directive is respecting whole numbers and assigning the value but not decimals.

I could use some insight from the Sass experts out there on what is currently wrong with this formula,

@for $i from 0 through 100 {
    .percentage-#{$i} {
        &:after {
            $value: ($i * 1%);
            width: $value;
        }
    }
}

Thanks again for your time.

score 0 · Answer 1 · answered Apr 14 '18 at 03:50

The second example won't work because the dot .percentage-50.5 chains two classes: .percentage-50 and .5.

Secondly, a class cannot start with a number so .5 is an invalid class name. More about valid class names here. A dot can't be used to indicate a decimal value in any class. You should replace the second dot with an underscore or hyphen.

Sass control directive @for with whole and decimal numbers

1 Answers1