Option Request: space-between-nested-blocks

[PD-WebTools]

I would like to suggest an option, space-between-nested-blocks. For my needs, I'd just like to make sure there is a line between my current rules and a nested selector. Example:

Example Source

.foo {
  color: black;
  .bar {
    color: gray;
  }
}

space-between-nested-blocks = true

.foo {
  color: black;

  .bar {
    color: gray;
  }
}

[ixax]

👍

[tonyganch]

sort-order option adds a line between sorted declarations and everything else.
If you don't want to set a specific order for properties, you can always set "sort-order": ["..."] in your config.

[ixax]

@tonyganch, this doesn't work for me :( http://pastebin.ru/mEq1TGhV

[1999]

@tonyganch double-checked it, "sort-order": ["..."] removes empty lines.

[tonyganch]

Should be fixed in 3.0.3.

[1999]

Thank you!

[tonyganch]

I'm sorry for closing the issue. I've misread description, it's not fixed really.

@PD-WebTools, is this issue somehow related to #210?

[hudochenkov]

@tonyganch, what are you think about this commit? It looks like solution for this. This issue not exactly related to rule-delimeter and you pointed on this in comment.

I've also need this feature and want to try make PR.

[tonyganch]

@hudochenkov, can you show a few examples (before and after) to illustrate what you want to achieve?

[tonyganch]

@hudochenkov, you want to sort rulesets too? Based on selectors?

[hudochenkov]

I want to visual separate block's properties, includes, extends and it's children. As I understand, now block's children not participating in sort-order. So it glued with no empty lines with all sort-order effected nodes. If we can identify all block's children as one entity, we can put them in sort-order. Previous implementation of $include works similar way: it gather all @include and @​extend in order presented in source file.

Example config:

{ "sort-order": [

["position", "top", "left", "margin", "padding", "padding-right", "content"],
["$include desk", "$include palm"],
["$nested-blocks"]

]}

Before:

.panel {
    position: absolute;
    top: 0;
    left: 0;
    &__inner {
        padding: 0 8px 0 20px;
        &:before {
            content: "";
        }
    }
    &__close {
        display: block;
    }
}

After (added two empty lines):

.panel {
    position: absolute;
    top: 0;
    left: 0;

    &__inner {
        padding: 0 8px 0 20px;

        &:before {
            content: "";
        }
    }
    &__close {
        display: block;
    }
}

---

Before:

.panel {
    position: absolute;
    top: 0;
    left: 0;

    @include palm {
        position: relative;
    }

    &__inner {
        padding: 0 8px 0 20px;

        @include desk {
            margin: 0 3.5%;
        }
        @include palm {
            padding-right: 20px;
        }
    }
    &__close {
        display: block;
    }
}

After (added one empty line):

.panel {
    position: absolute;
    top: 0;
    left: 0;

    @include palm {
        position: relative;
    }

    &__inner {
        padding: 0 8px 0 20px;

        @include desk {
            margin: 0 3.5%;
        }
        @include palm {
            padding-right: 20px;
        }
    }
    &__close {
        display: block;
    }
}

[atadams]

👍

[BorodinDK]

+1