Option for line breaks in nested css rules for better readability

Hello All,

I am using the Webstorm IDE for a JS-based product development. Within this product architecture, I am using LESS as a CSS preprocessor. LESS allows you to write nested css rules and mixins which brings about an object oriented approach to writing CSS. I want to know if there is any option to provide line breaks when it encounters any nested rules, rather than doing it manually in every possible file.

5 comments
Comment actions Permalink

Hello!

should these linebreaks be added when formatting the code? This works for me - unless I misunderstood what you meant to say
Please can you be more specific? Code snippets showing the desired formatting would help

0
Comment actions Permalink

Elena,

This is a sample code showing nested CSS rule declarations.

li {
          margin-bottom: 15px;
          &:last-child {
            margin-bottom: 0;
           }
    }


I want to know if WebStorm has some kind of LESS editor settings where it can automatically insert line breaks before nested CSS rule declaration. Somewhat similar to the indentation units we set for
code style.

Considering the above example, I want to know if a line break can be inserted automatically before the last-child rule begins rather than having to do it manually in a number of older frozen files.

0
Comment actions Permalink

I see, thanks for update :)
Line break is automatically inserted when reformatting (Ctrl+Alt+L)
There are no options to insert line breaks right on editing

0
Comment actions Permalink

Elena,

Is there an option to turn off the line break in nested *.scss rule when reformatting (Ctrl+Alt+L)?

Thank you.

0
Comment actions Permalink

What should the resultant formatting look like? Did you try enabling Keep single-line blocks in Settings | Editor | Code Style | Style Sheets | SCSS | Other tab?

0

Please sign in to leave a comment.