mutian / Sublime-CSS-Format

CSS Formatting for Sublime Text
http://mutian.github.io/Sublime-CSS-Format/
MIT License
98 stars 27 forks source link

Breaks interpolated variables #12

Open jonginn opened 10 years ago

jonginn commented 10 years ago

The expanded option turns an interpolated variable rule into new lines, presumably because it uses { & } brackets.

For example:

&.pt_#{$type}

Becomes:

&.pt_# {
            $type
        }

Which causes the SASS Compiler to fail.

Syntax error: Invalid CSS after "        &.pt_#": expected id name, was " {"

An interpolated variable needs to remain on one line with no spaces.

It's also worth noting that it drops the opening { to the rule it classes onto another new line. Here's a full example, AFTER formatting. SASS will not compile this.

$card-types:disruptions, post, policies, forms;
    @each $type in $card-types {
        &.pt_# {
            $type
        }
        {
            @extend .pt_extend;
            .post-filters_submit {
                @include retina-sprite(# {
                    $type
                }
                -white);
            }
        }
    }

Interpolated variables also do not work in other Formatting options. Here's Compact:

$card-types:disruptions, post, policies, forms;
@each $type in $card-types { &.pt_# { $type }
    { @extend .pt_extend;
        .post-filters_submit { @include retina-sprite(# { $type }
        -white); }
    }
}