SCSS Sort Order

[spAnser]

Ran import.css through csscomb.com/online and expected import.expected.scss instead I got:

div
{
    color: tomato; @import 'foo.css';
}

Seeing similar issue with @include and @extend

Noticed this bug using plugins for atom that rely on this library.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[octoxan]

Yeah my csscomb in Atom is pretty much useless. I can't use it on any of my .scss files without it ruining my code.

I have things set up like...

div {
    display: none;
}
@include bp(min-width, $bp-small+1) {
    div {
        display: block;
    }
}
@include bp(min-width, $bp-medium+1) {
    div {
       display: inline-block;
    }
}

running csscomb turns my file into...

@include bp(min-width, $bp-small+1) {
    div {
        display: block;
    }
}
@include bp(min-width, $bp-medium+1) {
    div {
       display: inline-block;
    }
}
div {
    display: none;
}

Which obviously is not good lol.

[tomagladiator]

Hi @octoxan, Do you have the problem if you use this structure? :

div {
    display: none;

    @include bp(min-width, $bp-small+1) {
        display: block;
    }

    @include bp(min-width, $bp-medium+1) {
        display: inline-block;
    }
}

Thanks

[raffomania]

Hi @tomagladiator, I have the same problem as @octoxan, even with the structure you mentioned.

[ghost]

Hi @tomagladiator, Is that possible make selectors sortable as properties, because SASS is nested, we have many situations like this.

[ghost]

Then the config will like this: "sort-order": [ [ "$variable" ], [ "$include" ], [ "..." ], ["$selector"] [ "$include media" ] ]

[hellor0bot]

Same issue here. $selector would be nice.