如何用SCSS函数根据媒体查询返回设备类型？

错误原因 #

SCSS函数是编译时执行的逻辑，而@media是CSS的运行时媒体查询规则，两者不能在函数内部混用。函数内直接嵌套@media违反SCSS语法规范，这就是你收到括号匹配错误提示的原因。

替代实现方案 #

方案1：用Mixin封装设备样式逻辑 #

如果你的需求是根据设备类型应用不同样式，使用Mixin更符合SCSS的设计逻辑，它可以直接包含媒体查询代码：

@mixin device-styles() {
  // 移动端规则
  @media screen and (width <= 800px) {
    @content;
  }
  // 平板端规则
  @media screen and (width > 800px) and (width <= 1024px) {
    @content;
  }
  // 桌面端规则
  @media screen and (width > 1024px) {
    @content;
  }
}

// 针对单个设备类型的快捷Mixin
@mixin for-device($type) {
  @if $type == mobile {
    @media screen and (width <= 800px) {
      @content;
    }
  } @else if $type == tablet {
    @media screen and (width > 800px) and (width <= 1024px) {
      @content;
    }
  } @else if $type == desktop {
    @media screen and (width > 1024px) {
      @content;
    }
  }
}

// 使用示例
.header {
  @include for-device(mobile) {
    padding: 1rem;
  }
  @include for-device(tablet) {
    padding: 1.5rem;
  }
  @include for-device(desktop) {
    padding: 2rem;
  }
}

方案2：用CSS变量动态标记设备类型 #

如果需要在运行时（比如JS交互）获取设备类型，可以通过媒体查询给根元素的CSS变量赋值：

:root {
  --device-type: desktop;
}

@media screen and (width <= 800px) {
  :root {
    --device-type: mobile;
  }
}

@media screen and (width > 800px) and (width <= 1024px) {
  :root {
    --device-type: tablet;
  }
}

// JS中可直接读取变量值
// document.documentElement.style.getPropertyValue('--device-type')

方案3：定义断点变量，手动组合媒体查询 #

先统一管理断点数值，在需要的地方直接引用，保持代码可维护性：

$breakpoints: (
  mobile-max: 800px,
  tablet-max: 1024px
);

// 使用示例
.card {
  @media screen and (width <= map-get($breakpoints, mobile-max)) {
    font-size: 0.9rem;
  }
  @media screen and (width > map-get($breakpoints, mobile-max)) and (width <= map-get($breakpoints, tablet-max)) {
    font-size: 1rem;
  }
  @media screen and (width > map-get($breakpoints, tablet-max)) {
    font-size: 1.1rem;
  }
}

内容的提问来源于stack exchange，提问作者Eli-ott