question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add or preserve empty line between nested SCSS rules

See original GitHub issue

Description

Even though I’m using newline_between_rules, it works only for top level (ie, zero-indented) rules (as confirmed by this changeset for the newline_between_rules PR). It’s highly useful for SCSS code to keep newlines also for nested rules, so I think this would be a feature request. Basically, I think that if the newline_between_rules option is true, it should keep the newlines also for the nested rules. Until this gets changed, I sadly need to disable it for my SCSS code.

Input

The code looked like this before beautification:

.list-group {
  .list-group-item {
  }
  
  .list-group-icon {
  }
}

.list-group-condensed {
}

Expected Output

The code should have looked like this after beautification:

.list-group {
  .list-group-item {
  }

  .list-group-icon {
  }
}

.list-group-condensed {
}

Actual Output

The code actually looked like this after beautification:

.list-group {
  .list-group-item {
  }
  .list-group-icon {
  }
}

.list-group-condensed {
}

Steps to Reproduce

Beautify SCSS file with example input.

Environment

VSCode Beautify plugin version 1.1.1.

Settings

Example:

{
    "end_with_newline": true,
    "brace_style": "collapse,preserve-inline",
    "max_preserve_newlines": 2,
    "newline_between_rules": true,
    "space_around_combinator": true,
    "space_after_anon_function": true,
    "wrap_line_length": 100,
    "css": {
        "indent_size": 2
    }
}

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:15
  • Comments:17 (4 by maintainers)

github_iconTop GitHub Comments

4reactions
davemaccommented, Oct 31, 2017

This issue is a showstopper for me, would be great to see it fixed - otherwise I am forced to disable SCSS beautification as well.

1reaction
alphabtcommented, Aug 14, 2018

I verified that it no longer removes newline on http://jsbeautifier.org (thanks!), but it would be even better if it automatically adds newline.

Read more comments on GitHub >

github_iconTop Results From Across the Web

VSCode: How do I KEEP blank lines (in scss files or others)?
Click it. It should format your opened .SCSS file and preserve the blank spaces between each CSS rule set (if they were there...
Read more >
rule-empty-line-before - Stylelint
Require or disallow an empty line before rules. This rule ignores rules that are the very first node in a source.
Read more >
Code Style. SCSS | CLion Documentation - JetBrains
Use this tab to define where and how many blank lines you want CLion to retain and insert in your code after reformatting....
Read more >
Native CSS nesting: What you need to know - LogRocket Blog
When we use a CSS preprocessor like Sass or Less, we can nest a CSS style rule within another rule to write clean...
Read more >
Sass Guidelines
Soon enough, Sass maintainers decided to close the gap between Sass and ... Just keep in mind that adding the unit as a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found