如何让SCSS编译后将闭合大括号}单独换行显示？

Hey there! I totally get your frustration with unreadable compact CSS output—well-formatted code makes maintenance way easier, and those inline closing braces are definitely a pain. Let's get this sorted for you.

The issue here is the default output style Sass uses. When you run your current command, it’s using a compact style that squashes rules together and keeps closing braces on the same line. To get those closing braces on their own line (and clean up the overall formatting), you just need to add the --style flag with the expanded option to your compile command.

Updated Compile Command #

sass --watch ./main.scss:../main.css --style expanded

What This Does #

The expanded style option generates clean, human-readable CSS where:

• Each rule block starts on its own line
• Closing braces } get their own dedicated line
• Properties are indented within rule blocks
• Separate rule blocks are spaced out with blank lines

Using your example SCSS code:

#moreFilterOptionsBtn { text-align: center;font-size: 1.6em; a { background: none; padding: 0; } }

The compiled CSS will now look like this:

#moreFilterOptionsBtn {
  text-align: center;
  font-size: 1.6em;
}

#moreFilterOptionsBtn a {
  background: none;
  padding: 0;
}

Quick Notes on Other Style Options #

If you ever need different formatting, Sass offers a few other built-in styles:

• nested: Default style, uses indentation to reflect SCSS nesting but keeps braces inline
• compact: Groups rules tightly with each rule on a single line
• compressed: Minified CSS for production, removes all whitespace and formatting

That should give you the clean, readable output you're looking for!

内容的提问来源于stack exchange，提问作者Andrew Newby