My SCSS is (incorrectly) auto-formated when I save my work

Support
1

Hello there,

I don’t know what I did but I regret it!

When I type something like the following

&::before {
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 50'%3e%3cpath fill='white' d='M0,0H70V10L35,50L0,10'/%3e%3c/svg%3e");
    position: absolute;
    bottom: -20px;
    height: 30px;
    width: 75px;
    left: calc(50% - 35px);
}

then save the file, here is what I get:

&:  :before {
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 50'%3e%3cpath fill='white' d='M0,0H70V10L35,50L0,10'/%3e%3c/svg%3e");
position: absolute;
bottom: -20px;
height: 30px;
width: 75px;
left: calc(50% - 35px);
}

It is not only ugly, it breaks the ::before pseudo-element syntax.
The file type is set to SCSS, as it should.

Thankfully, switching to CSS prevents this, so I can continue working.

What should I do? I think I have seen somewhere an option to scan and correct the file before saving. It must be switched on but I can’t find it in the preferences.

Thank you for your help!
Geoffrey

2

You likely enables “Format on Save” in the Formatting Dynamic button.

3

Thank you careyh,

It sounds promising, I’ll check that in a couple of hours.

Any idea why the auto formatting doesn’t respect the (S)CSS syntax ?
-> the selected formatting was CSS, not SCSS

4

That’d be why :slight_smile: