Formatting numbers during interpolation

The following snippet:

$n: 0;
@while $n <= 10 {
    .cls-#{n} { /* ... */ }
    $n: $n + 1;
}

Produces a list of classes like:

.cls-0 {}
.cls-1 {}
.cls-2 {}
...
.cls-10 {}

Is there any way to zero-pad the numeric interpolation such that the list of classes have a consistent number of digits like this?

.cls-00 {}
.cls-01 {}
.cls-02 {}
...
.cls-10 {}

[ArmorDarks]

@compwright This is slightly crazy, but can be even better solution for you.

If you’re using libsass via node-sass, you can pass sprintf function to Sass via custom function.

sprintf already has great built-in padding functionality, and even more.

Do not forget to cast properly JS type to Sass types, though.

[chriseppstein]

Writing a function to do this is the preferred option. Numeric formatting just isn’t that important in CSS for the most part.