Question

我正在使用SASS创建媒体查询助手。我需要你帮助让medium断点正常工作。

现在它只打印最大宽度。有什么想法吗？

$breakpoints: (
  small: ( max-width:  767px ),
  medium: (min-width: 768px ) and ( max-width:  991px ), // <--
  large: ( min-width: 1200px )
);

@mixin respond-to($name) {
  @if map-has-key($breakpoints, $name) {
    @media #{inspect(map-get($breakpoints, $name))} {
      @content;
    }
  }
  @else {
    @warn "no match found in breakpoint map";
  }
}

Answer 1

Sass尝试计算(min-width: 768px ) and ( max-width: 991px )的布尔值并获取错误。所以你应该将断点设置为字符串。

萨斯：

$breakpoints: (
  small:  '( max-width: 767px )',
  medium: '( min-width: 768px ) and ( max-width:  991px )',
  large:  '( min-width: 1200px )'
);

@mixin respond-to($name) {
  @if map-has-key($breakpoints, $name) {
    @media #{map-get($breakpoints, $name)} {
      @content;
    }
  } @else {
    @warn "no match found in breakpoint map";
  }
}

a {
  @include respond-to(medium) {
    color: red;
  }
}

Css输出：

@media (min-width: 768px) and (max-width: 991px) {
  a {
    color: red;
  }
}

Sassmeister demo。

组合媒体查询语句

1 个答案: