Sass编写respond响应式mixin报错，该如何正确书写？

你的Sass媒体查询mixin报错是语法规则不匹配导致的，分两种场景对应修复方案：

• 如果你使用的是SCSS语法（文件后缀为.scss，目前绝大多数前端项目的默认Sass语法），你遗漏了必填的大括号和行尾分号，正确代码如下：

@mixin respond($breakpoint) {
  @if $breakpoint == phone {
    @media only screen and (max-width: 37.5em) {
      @content;
    }
  }

  @if $breakpoint == tab-port {
    @media only screen and (max-width: 56.25em) {
      @content;
    }
  }

  @if $breakpoint == tab-land {
    @media only screen and (max-width: 75em) {
      @content;
    }
  }

  @if $breakpoint == big-desktop {
    @media only screen and (max-width: 112.5em) {
      @content;
    }
  }
}

// 调用示例
body {
  font-size: 16px;
  @include respond(phone) {
    font-size: 14px;
  }
}

• 如果你使用的是缩进式Sass语法（文件后缀为.sass，无大括号完全靠缩进区分层级），你错误的将@content和@media规则写在了同一行，没有单独缩进换行，正确代码如下：

@mixin respond($breakpoint)
  @if $breakpoint == phone
    @media only screen and (max-width: 37.5em)
      @content

  @if $breakpoint == tab-port
    @media only screen and (max-width: 56.25em)
      @content

  @if $breakpoint == tab-land
    @media only screen and (max-width: 75em)
      @content

  @if $breakpoint == big-desktop
    @media only screen and (max-width: 112.5em)
      @content

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