scss providing css classes with . inside

Question

I have a for loop in scss and I would like to output something like this:

.font-1.0em {font-size:1.0em} 
.font-1.1em {font-size:1.1em} 
.font-1.2em {font-size:1.2em} ....

I wrote the scss as this

@for $i from 1 through 50 {
    $val: $i + em;

    $val2: $i / 10 + em;

    &.font-#{$val} {
        font-size: #{$val2} ;
    }
}

which outputs

.font-10em {font-size:1.0em} 
.font-11em {font-size:1.1em} 
.font-12em {font-size:1.2em} ....

Is there anyway to fix this?

What is it you aren't happy with, is it that the numbers in the class name are not decimals? Also, dots in class names is unconventional and would require escaping the character in the css - [see this answer](https://stackoverflow.com/a/3447336/3909886) — Sam Willis, Feb 12 '20 at 10:26

score 0 · Answer 1 · answered Feb 12 '20 at 10:31

0

The thing you are trying to achive should be fairly easily solved, by using, same formula you have in $val2 in your $val

@for $i from 1 through 50 {
    $val: $i / 10 + em;

    $val2: $i / 10 + em;

    &.font-#{$val} {
        font-size: #{$val2} ;
    }
}

compiles to

.font-0.1em {
    font-size: 0.1em;
}

.font-0.2em {
    font-size: 0.2em;
}

Or am I missing something?

answered Feb 12 '20 at 10:31

Lukáš Gibo Vaic

It doesn't work with all sass implementations, I get an error if I try to compile this with dart-sass but not with libsass. – Arkellys Feb 12 '20 at 10:48
I compiled it with scss just fine, might be problem of compilation rather than implementation. – Lukáš Gibo Vaic Feb 12 '20 at 10:56
I belive you, in that case your parser doesnt allow it, so either get different one, or change the way you digest the end data, the parser you linked doesnt like dot in variable, so there isnt much space for fixing it. – Lukáš Gibo Vaic Feb 13 '20 at 13:50

1 Answers1