【问题标题】：LiveSass vscode extension compiles my .sass file into single line of code .css fileLiveSass vscode 扩展将我的 .sass 文件编译成单行代码 .css 文件
【发布时间】：2020-09-23 16:56:50
【问题描述】：

我刚开始看 sass 教程，我有一个小问题，我的教程老师没有发生，所以我不知道如何解决。

碰巧当我在 .scss 文件中编写代码时，一切看起来都很好，但是当我跳转到 .css 文件时，它全部编译成单行代码即使我有 200 行 sass 代码也没关系。所以在这里我将发布代码示例。顺便说一句，我正在使用名为“Live Sass Compiler”的 Visual Studio Code 扩展。

这是 scss 代码

的示例

$color: red;

body {
  background: $color;
}

h1 {
  font-size: 1rem;
}

header {
  font-family: Arial, Helvetica, sans-serif;
}

这是css编译代码：

body{background:red}h1{font-size:1rem}header{font-family:Arial, Helvetica, sans-serif}

【问题讨论】：

需要打开Live Sass Compiler的设置，将"format"的值设置为"expanded"。
解决了这个问题。非常感谢！

标签： html css visual-studio-code sass

【解决方案1】：

更改已编译 Sass 文件的格式

转到左侧垂直工具栏中的扩展程序
然后点击Live Sass Compiler的齿轮
然后滚动直到看到 Live Sass 编译 > 设置：格式
点击其下方的在settings.json中编辑
将"format"的值设置为"expanded"("format": "expanded",)

【讨论】：