如何编写媒体查询结合SASS变量判断视口宽度小于导航栏下可用高度

你要的判断逻辑可以直接通过媒体查询配合SASS变量插值实现，不需要额外工具，写法如下：

首先把你需要判断的100vw < calc(100vh - #{$navbar-height})直接转化为媒体查询条件即可：

$navbar-height: 60px; // 替换为你实际的导航栏高度变量值

// 匹配视口宽度小于导航栏下方可用高度的场景
@media (max-width: calc(100vh - #{$navbar-height})) {
  /* 这里写对应场景下的样式 */
  .content-area {
    flex-direction: column;
  }
}

说明 #

• 逻辑完全等价你需要的判断规则：max-width: 长度值本身的含义就是视口宽度小于等于该长度时匹配，如果你需要严格排除宽度和可用高度相等的边界场景，把条件改成max-width: calc(100vh - #{$navbar-height} - 0.1px)即可
• SASS编译时只会把#{$navbar-height}替换成实际的高度数值，calc表达式会保留在最终CSS中，由浏览器实时计算，完全适配窗口大小变化的动态场景
• 目前所有主流浏览器都支持媒体查询条件中使用calc表达式，兼容性足够覆盖绝大多数使用场景

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