@mixin “@mixin”后的 CSS 无效答案

【问题标题】：@mixin Invalid CSS after "@mixin@mixin “@mixin”后的 CSS 无效
【发布时间】：2018-10-02 19:47:06
【问题描述】：

这个 sass mixin 有什么问题？

@mixin tablet {
  @media (min-width: #{$tablet}) and (max-width: #{desktop - 1px})
    {
      @content;
    }
}

node-sass 告诉我这个错误：

@mixin tablet {
              ^
      Invalid CSS after "@mixin tablet {": expected "}", was "{"
      in /home/alexzeitler/src/my-prj/mobile-mockups/src/styles/responsive-mixins.sass (line 4, column 16)

但是every sample我look在，使用我上面显示的语法。

更新： ./node_modules/.bin/node-sass --version返回

node-sass   4.9.3   (Wrapper)   [JavaScript]
libsass     3.5.4   (Sass Compiler) [C/C++]

【问题讨论】：

在您的媒体查询中，您可以先将max-width: #{desktop - 1px} 替换为max-width: #{$desktop - 1px}

标签： sass stylesheet node-sass

【解决方案1】：

解决方案：我弄乱了文件扩展名。使用.scss 而不是.sass 修复了它。

如果您想坚持使用.sass 扩展名，也可以使用此 SASS 语法来修复它：

=tablet
  @media (min-width: #{$tablet}) and (max-width: #{desktop - 1px})
      @content

=desktop
  @media (min-width: #{$desktop-width})
  @content

【讨论】：

使用(max-width: #{$desktop - 1px})可以吗？