在VSCode中使用Live SASS Compiler编译SASS时出现编译错误

从你给出的错误信息和代码来看，核心问题是语法混淆——你写的是旧版缩进式的SASS语法（对应.sass后缀文件），但你的文件是.scss后缀，Live SASS Compiler默认会按标准SCSS语法（要求大括号、分号）来解析，导致语法不兼容报错。另外代码里还有几处语法细节问题，一起帮你修正：

错误原因拆解 #

1. 语法格式不匹配：SCSS（.scss）要求选择器后加{}，属性结尾加分号；而你用了缩进式写法（这是.sass文件的语法规则），编译器无法识别@import后的body作为有效选择器。
2. 伪类写法错误：像:hover, :focus这种伪类，在嵌套写法里需要加上&来指代父选择器，否则会被解析成全局伪类，不符合预期。
3. 结构缩进混乱：缩进式语法里，属性必须在选择器的下一级缩进，你的部分代码层级不清晰，也会导致编译失败。

两种解决方案 #

方案一：改用缩进式SASS语法（修改文件后缀为.sass） #

把general.scss改名为general.sass，然后修正代码如下：

@import "ci_template.css"

body
  font-family: calibri, sans-serif, Arial
  margin: 0px
  color: var(--ci-clr-primary)

/************/
/* Header */
/************/
#header
  font-weight: bold
  background-color: var(--ci-clr-primary)
  color: white
  overflow: hidden

  #header-logo img
    width: var(--ci-logo-width)
    margin: var(--ci-logo-margin)

  #header-text
    line-height: 100px
    font-size: 2.5em

  div
    float: left
    display: block

/************/
/* topnav */
/************/
#topnav
  overflow: hidden
  background-color: darkgrey

  a
    float: left
    display: block
    color: white
    text-align: center
    padding: 14px 16px
    text-decoration: none
    font-weight: bold

    &:hover, &:focus
      background-color: #ddd
      color: grey

方案二：转换成标准SCSS语法（保留.scss后缀） #

如果不想改文件后缀，就把代码改成标准SCSS格式（补全大括号、分号，修正伪类）：

@import "ci_template.css";

body {
  font-family: calibri, sans-serif, Arial;
  margin: 0px;
  color: var(--ci-clr-primary);
}

/************/
/* Header */
/************/
#header {
  font-weight: bold;
  background-color: var(--ci-clr-primary);
  color: white;
  overflow: hidden;

  #header-logo img {
    width: var(--ci-logo-width);
    margin: var(--ci-logo-margin);
  }

  #header-text {
    line-height: 100px;
    font-size: 2.5em;
  }

  div {
    float: left;
    display: block;
  }
}

/************/
/* topnav */
/************/
#topnav {
  overflow: hidden;
  background-color: darkgrey;

  a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-weight: bold;

    &:hover, &:focus {
      background-color: #ddd;
      color: grey;
    }
  }
}

额外提示 #

• Live SASS Compiler可以在设置里指定语法，但最稳妥的还是让文件后缀和语法匹配，避免混淆。
• 导入.css文件时，SCSS会直接编译成原生CSS的@import规则，如果你想把CSS文件当作SCSS模块导入，可以去掉.css后缀（前提是文件实际兼容SCSS语法）。

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